React ScrollView - Overview

The ScrollView is a UI component that enables a user to scroll its content.

View Demo

The following code adds a simple ScrollView to your page. The width and height properties specify the UI component size. By default, the ScrollView allows a user to scroll its content vertically. To change this behavior, use the direction property. Note that horizontal scrolling appears only if the content is wider than the ScrollView. Otherwise, the content adapts to the width of the ScrollView.

jQuery
JavaScript
HTML
$(function() {
    $("#scrollViewContainer").dxScrollView({
        height: 500,
        width: 500,
        direction: 'both' // or 'horizontal' | 'vertical'
    });
});
<div id="scrollViewContainer">
    <!-- Here goes long content -->
</div>
Angular
HTML
TypeScript
<dx-scroll-view
    [height]="500"
    [width]="500"
    direction="both">  <!-- or 'horizontal' | 'vertical' -->
    <!-- Here goes long content -->
</dx-scroll-view>
import { DxScrollViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxScrollViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScrollView
        :height="500"
        :width="500"
        direction="both">  <!-- or 'horizontal' | 'vertical' -->
        <!-- Here goes long content -->
    </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
    }
};
</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}
                width={500}
                direction="vertical">  {/* or 'horizontal' | 'vertical' */}
                {/* Here goes long content */}
            </ScrollView>
        );
    }
}

export default App;

The ScrollView employs native scrolling on most platforms, except desktops. To employ it on all platforms without exception, assign true to the useNative property. Note that if you assign false to this property, the ScrollView will simulate scrolling on all platforms.

jQuery
JavaScript
HTML
$(function() {
    $("#scrollViewContainer").dxScrollView({
        useNative: true
    });
});
<div id="scrollViewContainer"></div>
Angular
HTML
TypeScript
<dx-scroll-view
    [useNative]="true">
</dx-scroll-view>
import { DxScrollViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxScrollViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScrollView
        :use-native="true"
    />
</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
    }
};
</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
                useNative={true}
            />
        );
    }
}

export default App;

If simulated scrolling is used, you can specify when to show the scrollbar. For this purpose, use the showScrollbar property.

jQuery
JavaScript
HTML
$(function() {
    $("#scrollViewContainer").dxScrollView({
        useNative: false,
        showScrollbar: 'always' // or 'onScroll' | 'onHover' | 'never'
    });
});
<div id="scrollViewContainer"></div>
Angular
HTML
TypeScript
<dx-scroll-view
    [useNative]="false"
    [showScrollbar]="always">  <!-- or 'onScroll' | 'onHover' | 'never' -->
</dx-scroll-view>
import { DxScrollViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxScrollViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScrollView
        :use-native="false"
        show-scrollbar="always"  <!-- or 'onScroll' | 'onHover' | 'never' -->
    />
</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
    }
};
</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
                useNative={false}
                showScrollbar="always" {/* or 'onScroll' | 'onHover' | 'never' */}
            />
        );
    }
}

export default App;
See Also