Configuration

An object defining configuration options for the dxScrollView 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'

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

height

Specifies the height of the widget.

Type:

Number

|

String

|

function

Return Value:

Number

|

String

The widget height.

Default Value: undefined

The option can hold a value of the following types.

  • number
    The height of the widget in pixels

  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

  • function
    A function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

onDisposing

A handler for the disposing event.

Type:

function

Function parameters:
e:

Object

Provides function parameters.

Object structure:
component:

Object

Provides access to the widget 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 and AngularJS approaches.

Default Value: null

onInitialized

A handler for the initialized event.

Type:

function

Function parameters:
e:

Object

Provides function parameters.

Object structure:
component:

Object

Provides access to the widget instance.

element:

jQuery

An HTML element of the widget.

Default Value: null

Assign a function to perform a custom action when the widget is initialized.

onOptionChanged

A handler for the optionChanged event.

Type:

function

Function parameters:
e:

Object

Provides function parameters.

Object structure:
component:

Object

Provides access to the widget instance.

name:

String

Specifies the name of the option whose value is changed.

fullName:

String

Specifies a full name of the option whose value is changed. The full name is formed by concatenating the names of the options that are presented in the hierarchy of the given option. The names are delimited by commas.

value: any

Specifies a new value for the option.

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 and AngularJS approaches.

Default Value: null

Assign a function to perform a custom action after an option of the component is changed.

onPullDown

A handler for the pullDown event.

Type:

function

Function parameters:
e:

Object

Provides function parameters.

Object structure:
component:

Object

Provides access to the widget 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 Knockout and AngularJS approaches.

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:
e:

Object

Provides function parameters.

Object structure:
component:

Object

Provides access to the widget 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 and AngularJS approaches.

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:
e:

Object

Provides function parameters.

Object structure:
component:

Object

Provides access to the widget 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 and AngularJS approaches.

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:
e:

Object

Provides function parameters.

Object structure:
component:

Object

Provides access to the widget 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 and AngularJS approaches.

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

pullDownAction

Deprecated

Use the onPullDown option instead.

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..."

reachBottomAction

Deprecated

Use the onReachBottom option instead.

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

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

Type:

Boolean

Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

scrollAction

Deprecated

Use the onScroll option instead.

scrollByContent

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

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.

Show Example:
AngularJS
Knockout
jQuery

updateAction

Deprecated

Use the onUpdated option instead.

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.

Type:

Number

|

String

|

function

Return Value:

Number

|

String

The widget width.

Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }