ScrollView

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

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

You can create the widget using one of the following approaches.

  • jQuery
    Use the dxScrollView jQuery plug-in.

    HTML
    <div id="scrollView">
        . . .
    </div>
    JavaScript
    $("#scrollView").dxScrollView({
        direction: 'both',
        onPullDown: function() {
            //process pullDown event
        },
        onReachBottom: function() {
            //process reachBottom event
        }
    });
  • Knockout
    Add a div element and apply the dxScrollView binding to this element.

    HTML
    <div data-bind="dxScrollView: {
        direction: 'both',
        onPullDown: function() {
            //process pullDown event
        },
        onReachBottom: function() {
            //process reachBottom event
        }
    }">
        . . .
    </div>
  • AngularJS
    Add a div element and apply the dx-scroll-view directive to this element.

    HTML
    <div dx-scroll-view="{
        direction: 'both',
        onPullDown: function() {
            //process pullDown event
        },
        onReachBottom: function() {
            //process reachBottom event
        }
    }">
        . . .
    </div>

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the Installation article.

You can find detailed information on the principles of working with the widget in the dxScrollView section of the Individual Widgets article.

View Demo

Configuration

An object defining configuration options for the dxScrollView widget.

Name Description
bounceEnabled

A Boolean value specifying whether to enable or disable the bounce-back effect.

direction

A string value specifying the available scrolling directions.

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

height

Specifies the height of the widget.

onDisposing

A handler for the disposing event.

onInitialized

A handler for the initialized event.

onOptionChanged

A handler for the optionChanged event.

onPullDown

A handler for the pullDown event.

onReachBottom

A handler for the reachBottom event.

onScroll

A handler for the scroll event.

onUpdated

A handler for the update event.

pulledDownText

Specifies the text shown in the pullDown panel when pulling the content down lowers the refresh threshold.

pullingDownText

Specifies the text shown in the pullDown panel while pulling the content down to the refresh threshold.

reachBottomText

Specifies the text shown in the pullDown panel displayed when content is scrolled to the bottom.

refreshingText

Specifies the text shown in the pullDown panel displayed when the content is being refreshed.

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

scrollByContent

A Boolean value specifying whether or not an end-user can scroll the widget content swiping it up or down.

scrollByThumb

A Boolean value specifying whether or not an end-user can scroll the widget content using the scrollbar.

showScrollbar

Specifies when the widget shows the scrollbar.

useNative

Indicates whether to use native or simulated scrolling.

width

Specifies the width of the widget.

Methods

This section describes the members used to manipulate the widget.

Name Description
beginUpdate()

Prevents the component from refreshing until the endUpdate method is called.

clientHeight()

Returns the height of the scrollable widget in pixels.

clientWidth()

Returns the width of the scrollable widget in pixels.

content()

Returns an HTML element of the widget.

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

element()

Returns the root HTML element of the widget.

endUpdate()

Enables the component to refresh after the beginUpdate method call.

instance()

Returns an instance of this component class.

off(eventName)

Detaches all event handlers from the specified event.

off(eventName, eventHandler)

Detaches a particular event handler from the specified event.

on(eventName, eventHandler)

Subscribes to a specified event.

on(events)

Subscribes to the specified events.

option()

Returns the configuration options of this component.

option(optionName)

Gets the value of the specified configuration option of this component.

option(optionName, optionValue)

Sets a value to the specified configuration option of this component.

option(options)

Sets one or more options of this component.

refresh()

Locks the widget until the release(preventScrollBottom) method is called and executes the function passed to the onPullDown option and the handler assigned to the pullDown event.

release(preventScrollBottom)

Notifies the scroll view that data loading is finished.

scrollBy(distance)

Scrolls the widget content by the specified number of pixels.

scrollBy(distanceObject)

Scrolls widget content by the specified number of pixels in horizontal and vertical directions.

scrollHeight()

Returns the height of the scrollable content in pixels.

scrollLeft()

Returns the current scroll position against the leftmost position.

scrollOffset()

Returns how far the scrollable content is scrolled from the top and from the left.

scrollTo(targetLocation)

Scrolls widget content to the specified position.

scrollTo(targetLocationObject)

Scrolls widget content to a specified position.

scrollToElement(targetLocation)

Scrolls widget content to the specified element.

scrollTop()

Returns the current scroll position against the topmost position.

scrollWidth()

Returns the width of the scrollable content in pixels.

update()

Updates the dimensions of the scrollable contents.

Events

This section describes events fired by this widget.

Name Description
disposing

Fires when the widget is being removed.

initialized

Fires when the widget is initialized.

optionChanged

Fires after an option of the component is changed.

pullDown

Fires after the widget is scrolled to the top and pulled down.

reachBottom

Fires after the widget is scrolled to the bottom and pulled up.

scroll

Fires on each scroll gesture.

updated

Fires after the widget is updated.