DevExtreme React - 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.

jQuery
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>
Angular
HTML
TypeScript
<dx-scroll-view
    [height]="500"
    [bounceEnabled]="true"
    (onPullDown)="updateContent($event)">
</dx-scroll-view>
import { DxScrollViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    updateContent(e) {
        // Commands that refresh the content go here
        e.component.release();
    }
}
@NgModule({
    imports: [
        // ...
        DxScrollViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScrollView
        :height="500"
        :bounce-enabled="true"
        @pull-down="updateContent"
    />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxScrollView } from 'devextreme-vue/scroll-view';

export default {
    components: {
        DxScrollView
    },
    methods: {
        updateContent(e) {
            // Commands that refresh the content go here
            e.component.release();
        }
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { ScrollView } from 'devextreme-react/scroll-view';

class App extends React.Component {
    render() {
        return (
            <ScrollView
                height={500}
                bounceEnabled={true}
                onPullDown={this.updateContent}
            />
        );
    }

    updateContent = (e) => {
        // Commands that refresh the content go here
        e.component.release();
    }
}

export default App;
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.

jQuery
JavaScript
HTML
$(function () {
    $("#scrollViewContainer").dxScrollView({
        height: 500,
        onReachBottom: function (e) {
            // Commands that refresh the content go here
            e.component.release();
        }
    });
});
<div id="scrollViewContainer"></div>
Angular
HTML
TypeScript
<dx-scroll-view
    [height]="500"
    (onReachBottom)="updateContent($event)">
</dx-scroll-view>
import { DxScrollViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    updateContent(e) {
        // Commands that refresh the content go here
        e.component.release();
    }
}
@NgModule({
    imports: [
        // ...
        DxScrollViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScrollView
        :height="500"
        @reach-bottom="updateContent"
    />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxScrollView } from 'devextreme-vue/scroll-view';

export default {
    components: {
        DxScrollView
    },
    methods: {
        updateContent(e) {
            // Commands that refresh the content go here
            e.component.release();
        }
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { ScrollView } from 'devextreme-react/scroll-view';

class App extends React.Component {
    render() {
        return (
            <ScrollView
                height={500}
                onReachBottom={this.updateContent}>
            </ScrollView>
        );
    }

    updateContent = (e) => {
        // Commands that refresh the content go here
        e.component.release();
    }
}

export default App;

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.

jQuery
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>
Angular
HTML
TypeScript
<dx-scroll-view
    [height]="500"
    (onScroll)="scroll($event)">
</dx-scroll-view>
import { DxScrollViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    scroll(e) {
        if(e.reachedBottom) {
            // Here go the commands to be executed when the bottom is reached
        }
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxScrollViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScrollView
        :height="500"
        @scroll="scroll">
    </DxScrollView>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxScrollView } from 'devextreme-vue/scroll-view';

export default {
    components: {
        DxScrollView
    },
    methods: {
        scroll(e) {
            if(e.reachedBottom) {
                // Here go the commands to be executed when the bottom is reached
            }
            // ...
        }
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { ScrollView } from 'devextreme-react/scroll-view';

class App extends React.Component {
    render() {
        return (
            <ScrollView
                height={500}
                onScroll={this.scroll}
            />
        );
    }

    scroll = (e) => {
        if(e.reachedBottom) {
            // Here go the commands to be executed when the bottom is reached
        }
        // ...
    }
}

export default App;
See Also