Configuration

An object defining configuration options for the ScrollView widget.

bounceEnabled

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

Type: Boolean
Default Value: true
Default for desktop: false

If the option is set to true, you can scroll the widget content up (down) even if you have reached the bottom (top) boundary. But when you release the content, it returns to the bound position. If the option value is false, you can scroll the widget content until you reach the boundary.

direction

A string value specifying the available scrolling directions.

Type: String
Default Value: 'vertical'
Accepted Values: 'vertical' | 'horizontal' | 'both'

When using the widget as an ASP.NET MVC Control, specify this option using the ScrollDirection enum. This enum accepts the following values: Vertical, Horizontal and Both.

Show Example:
AngularJS
Knockout
jQuery

disabled

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

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

Show Example:
AngularJS
Knockout
jQuery

elementAttr

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

Type: Object
Default Value: {}

You can configure this option in an ASP.NET MVC Control as follows:

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)
@(Html.DevExtreme().WidgetName() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

height

Specifies the height of the widget container.

Type: Number|String| function
Return Value: Number|String

The widget height.

Default Value: undefined

This option accepts a value of one of the following types.

  • Number
    The height of the widget in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    height: function() {
        return window.innerHeight / 1.5;
    }

onDisposing

A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object
element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

Default Value: null

onInitialized

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

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object
element: jQuery

The widget's container.

Default Value: null

You cannot access elements in the widget because this handler is executed before they are ready. Use the onContentReady handler instead.

onOptionChanged

A handler for the optionChanged event. Executed after an option of the widget is changed.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object
name: String

A short name of the option whose value has been changed.

fullName: String

A full name of the option whose value has been changed; contains a full hierarchy of the option.

value: any

A new value for the option.

element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

Default Value: null

onPullDown

A handler for the pullDown event.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

Default Value: null

Assign a function to perform a custom action after the widget is scrolled to the top and pulled down.

The function passed to this option should contain a call to the release() method, which releases the scroll view.

JavaScript
var scrollViewOptions = {
    onPullDown: function(options){
        . . .
        options.component.release();
    }
}
NOTE
The "pull down to refresh" gesture is not supported by desktop browsers and Windows Phone devices. You can use it only in mobile themes except the Windows Phone theme.
Show Example:
AngularJS
Knockout
jQuery

onReachBottom

A handler for the reachBottom event.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

Default Value: null

Assign a function to perform a custom action after the widget is scrolled to the bottom and pulled up.

The function passed to this option should contain a call to the release() method, which releases the scroll view.

JavaScript
var scrollViewOptions = {
    onReachBottom: function(options){
        . . .
        options.component.release();
    }
}
Show Example:
AngularJS
Knockout
jQuery

onScroll

A handler for the scroll event.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object
element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Returns a jQuery event that caused action execution.

scrollOffset: Object

Returns the current scroll offset in the following format: { top: topOffset, left: leftOffset }.

reachedLeft: Boolean

Indicates whether the container's left boundary is reached.

reachedRight: Boolean

Indicates whether the container's right boundary is reached.

reachedTop: Boolean

Indicates whether the container's top boundary is reached.

reachedBottom: Boolean

Indicates whether the container's bottom boundary is reached.

Default Value: null

Assign a function to perform a custom action on each scroll gesture.

Show Example:
AngularJS
Knockout
jQuery

onUpdated

A handler for the update event.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object
element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Returns a jQuery event that caused the action execution.

scrollOffset: Object

Returns the current scroll offset in the following format: { top: topOffset, left: leftOffset }.

reachedLeft: Boolean

Indicates whether the container's left boundary is reached.

reachedRight: Boolean

Indicates whether the container's right boundary is reached.

reachedTop: Boolean

Indicates whether the container's top boundary is reached.

reachedBottom: Boolean

Indicates whether the container's bottom boundary is reached.

Default Value: null

Assign a function to perform a custom action after the widget is updated.

Show Example:
AngularJS
Knockout
jQuery

pulledDownText

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

Type: String
Default Value: 'Release to refresh...'

pullingDownText

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

Type: String
Default Value: 'Pull down to refresh...'

reachBottomText

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

Type: String
Default Value: 'Loading...'

refreshingText

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

Type: String
Default Value: 'Refreshing...'

rtlEnabled

Switches the widget to a right-to-left representation.

Type: Boolean
Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});

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

Type: Boolean
Default Value: true
Default for desktop: true for a touch screen. Otherwise, false.

scrollByThumb

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

Type: Boolean
Default Value: false
Default for desktop: true

showScrollbar

Specifies when the widget shows the scrollbar.

Type: String
Default Value: 'onScroll'
Default for desktop: 'onHover'
Accepted Values: 'onScroll' | 'onHover' | 'always' | 'never'

Setting this option makes sense only when the useNative option is set to false.

When using the widget as an ASP.NET MVC Control, specify this option using the ShowScrollbarMode enum. This enum accepts the following values: OnScroll, OnHover, Always and Never.

Show Example:
AngularJS
Knockout
jQuery

useNative

Indicates whether to use native or simulated scrolling.

Type: Boolean
Default Value: true
Default for android below version 4: false
Default for desktop: false
Default for mac desktop: true

width

Specifies the width of the widget container.

Type: Number|String| function
Return Value: Number|String

The widget width.

Default Value: undefined

This option accepts a value of one of the following types.

  • Number
    The width of the widget in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    width: function() {
        return window.innerWidth / 1.5;
    }