The following code adds a simple ScrollView to your page. The width and height options specify the widget size. By default, the ScrollView allows a user to scroll its content vertically. To change this behavior, use the direction option. 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 option. Note that if you assign false to this option, 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 option.

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;

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

DevExtreme jQuery - Overview

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also