DevExtreme Vue - Overview

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

View Demo

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.

HTML
JavaScript
<div id="scrollViewContainer">
    <!-- Here goes long content -->
</div>
$(function() {
    $("#scrollViewContainer").dxScrollView({
        height: 500,
        width: 500,
        direction: 'both' // or 'horizontal' | 'vertical'
    });
});

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.

JavaScript
$(function() {
    $("#scrollViewContainer").dxScrollView({
        useNative: true
    });
});

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

JavaScript
$(function() {
    $("#scrollViewContainer").dxScrollView({
        useNative: false,
        showScrollbar: 'always' // or 'onScroll' | 'onHover' | 'never'
    });
});
See Also