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

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.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.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.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.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;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery ScrollView - Handle Scroll Gestures

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also