ScrollView

A widget used to display scrollable content.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The dxScrollView widget represents a scrollable field that displays data located inside the HTML element representing the widget.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxScrollView widget using the Knockout approach.

HTML
<div data-bind="dxScrollView:{pullDownAction: pulledDown, reachBottomAction: reachedBottom}">
    <p>The text that should be displayed by the widget.</p>
</div>

NOTE: By default, dxScrollView has a height that is 100% equivalent to that of the container. When you place this widget on your view, the view content becomes a container for your widget. This results in the stretching of the widget according to the view content height. This does not become an issue for widget content visualization. However, if the view has extra element(s) in addition to the dxScrollView widget, the total height of the view content will be more than it is, because of the default height of the dxScrollView widget. This will lead to a problem with scrolling. To solve this, specify a height for the dxScrollView widget so that the total height of the view elements equals the view content height. Use any means you like for the solution (e.g., css rules, the height option, etc.).

The widget includes pullDownAction and reachBottomAction configuration options, which allow you to handle the appropriate events.

Declare functions that handle the pullDown and reachBottom events, and pass them to the appropriate configuration options.

JavaScript
var pulledDown = function(e){
    alert("The ScrollView pulled down");
};
var reachedBottom = function(e){
    alert("The ScrollView reached the bottom");
};
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
Show Example:
jQuery

Configuration

An object defining configuration options for the dxScrollView widget.

Methods

This section describes the members used to manipulate the widget.

Events

This section describes events fired by this component.