ScrollView

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

Included in: dx.mobile.js, dx.web.js, dx.viz-web.js, dx.all.js
Module: ui/scroll_view
Export: default

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

  • jQuery

    JavaScript
    HTML
    $(function() {
        $("#scrollView").dxScrollView({
            height: 500,
            width: 500,
            direction: 'both'
        });
    });
    <div id="scrollView">
        <div id="content"></div>
    </div>
  • Angular

    HTML
    <dx-scroll-view
        [height]="500"
        [width]="500"
        direction="both">
            <div id="content"></div>
    </dx-scroll-view>
  • AngularJS

    HTML
    <div dx-scroll-view="{
        height: 500,
        width: 500,
        direction: 'both'
    }">
        <div id="content"></div>
    </div>
  • Knockout

    HTML
    <div data-bind="dxScrollView: {
        height: 500,
        width: 500,
        direction: 'both'
    }">
        <div id="content"></div>
    </div>
  • ASP.NET MVC Wrappers

    Razor C#
    Razor VB
    @(Html.DevExtreme().ScrollView()
        .ID("scrollView")
        .Height(500)
        .Width(500)
        .Direction(ScrollDirection.Both)
        .Content(@<text>
            <div id="content"></div>
        </text>)
    )
    @Code
        Html.DevExtreme().ScrollView() _
            .ID("scrollView") _
            .Height(500) _
            .Width(500) _
            .Direction(ScrollDirection.Both) _
            .Content(Sub()
                @<text>
                    <div id="content"></div>
                </text>
            End Sub).Render()
    End Code

Note that DevExtreme widgets require linking the jQuery library to your application. The Knockout or AngularJS library is also needed if you use the Knockout or AngularJS approach. For detailed information on linking these libraries to your project, refer to the topics in the Installation section.

View Demo

See Also

Configuration

An object defining configuration options for the ScrollView 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.

elementAttr

Specifies the attributes to be attached to the widget's root element.

height

Specifies the height of the widget.

onDisposing

A handler for the disposing event.

onInitialized

A handler for the initialized event. Executed only once, after the widget is initialized.

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. Applies only if useNative is false

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

Raised only once, after 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.