JavaScript/jQuery ScrollView - Handle Scroll Gestures

The ScrollView raises the pullDown event when a user performs the pull-to-refresh gesture. Handle this event to refresh the content of the ScrollView. Note that the handling function should end with a call of the release() method to release the ScrollView.

JavaScript
HTML
  • $(function () {
  • $("#scrollViewContainer").dxScrollView({
  • height: 500,
  • bounceEnabled: true,
  • onPullDown: function (e) {
  • // Commands that refresh the content go here
  • e.component.release();
  • }
  • });
  • });
  • <div id="scrollViewContainer"></div>
NOTE
To enable the pull-to-refresh gesture on desktops, set the bounceEnabled property to true.

If an end user scrolls the content down to the bottom, the ScrollView raises the reachBottom event. You can handle it using the onReachButtom function. Note that this function should also contain a call of the release() method.

JavaScript
HTML
  • $(function () {
  • $("#scrollViewContainer").dxScrollView({
  • height: 500,
  • onReachBottom: function (e) {
  • // Commands that refresh the content go here
  • e.component.release();
  • }
  • });
  • });
  • <div id="scrollViewContainer"></div>

If you want to process each scroll gesture performed by a user, handle the scroll event. The object passed to the handling function contains the reachedTop, reachedBottom, reachedLeft or reachedRight properties. Use them to check if scrolling has reached any of the content boundaries. Note that availability of these properties depends on the allowed scrolling direction.

JavaScript
HTML
  • $(function () {
  • $("#scrollViewContainer").dxScrollView({
  • height: 500,
  • onScroll: function(e) {
  • if(e.reachedBottom) {
  • // Here go the commands to be executed when the bottom is reached
  • }
  • // ...
  • }
  • });
  • });
  • <div id="scrollViewContainer"></div>
See Also