DevExtreme Vue - 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
$(function() {
    $("#scrollViewContainer").dxScrollView({
        height: 500,
        bounceEnabled: true,
        onPullDown: function (e) {
            // Commands that refresh the content go here
            e.component.release();
        }
    });
});
NOTE
To enable the pull-to-refresh gesture on desktops, set the bounceEnabled option 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
$(function() {
    $("#scrollViewContainer").dxScrollView({
        height: 500,
        onReachBottom: function (e) {
            // Event handling commands go here
            e.component.release();
        }
    });
});

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
$(function() {
    $("#scrollViewContainer").dxScrollView({
        height: 500,
        onScroll: function (e) {
            if (e.reachedBottom) {
                // Here go the commands to be executed when the bottom is reached
            }
            // ...
        }
    });
});
See Also