Vue ScrollView API

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

import DxScrollView from "devextreme-vue/scroll-view"
Type: DxScrollViewTypes.default

View Demo Read Guides

See Also

Props

An object defining configuration properties for the ScrollView UI component.

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

Specifies whether the UI component responds to user interaction.
elementAttr

Specifies the global attributes to be attached to the UI component's container element.
height

Specifies the UI component's height.
onDisposing

A function that is executed before the UI component is disposed of.
onInitialized

A function used in JavaScript frameworks to save the UI component instance.
onOptionChanged

A function that is executed after a UI component property is changed.
onPullDown

A function that is executed when the "pull to refresh" gesture is performed. Supported on mobile devices only.
onReachBottom

A function that is executed when the content is scrolled down to the bottom.
onScroll

A function that is executed on each scroll gesture.
onUpdated

A function that is executed each time the UI component is updated.
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

Switches the UI component to a right-to-left representation.
scrollByContent

A Boolean value specifying whether or not an end-user can scroll the UI component 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 UI component content using the scrollbar.
showScrollbar

Specifies when the UI component shows the scrollbar.
useNative

Indicates whether to use native or simulated scrolling.
width

Specifies the UI component's width.

See Also

Methods

This section describes the members used to manipulate the UI component.

Name Description
beginUpdate()

Prevents the UI component from refreshing until the endUpdate() method is called.
clientHeight()

Gets the UI component's height.
clientWidth()

Gets the UI component's width.
content()

Gets the UI component's content.
defaultOptions(rule)

Specifies the device-dependent default configuration properties for this component.
dispose()

Disposes of all the resources allocated to the ScrollView instance.
element()

Gets the root UI component element.
endUpdate()

Refreshes the UI component after a call of the beginUpdate() method.
getInstance(element)

Gets the instance of a UI component found using its DOM node.
instance()

Gets the UI component's instance. Use it to access other methods of the UI component.
off(eventName)

Detaches all event handlers from a single event.
off(eventName, eventHandler)

Detaches a particular event handler from a single event.
on(eventName, eventHandler)

Subscribes to an event.
on(events)

Subscribes to events.
option()

Gets all UI component properties.
option(optionName)

Gets the value of a single property.
option(optionName, optionValue)

Updates the value of a single property.
option(options)

Updates the values of several properties.
refresh()

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

Notifies the ScrollView that data loading is finished.
resetOption(optionName)

Resets an property to its default value.
scrollBy(distance)

Scrolls the content by a specific distance.
scrollHeight()

Gets the scrollable content's height in pixels.
scrollLeft()

Gets the left scroll offset.
scrollOffset()

Gets the scroll offset.
scrollTo(targetLocation)

Scrolls the content to a specific position.
scrollToElement(element)

Scrolls content to an element.
scrollTop()

Gets the top scroll offset.
scrollWidth()

Gets the scrollable content's width in pixels.
update()

Updates the scrollable contents' dimensions.

See Also

Events

This section describes events fired by this UI component.

Name Description
disposing

Raised before the UI component is disposed of.
initialized

Raised only once, after the UI component is initialized.
optionChanged

Raised after a UI component property is changed.
pullDown

Raised when the "pull to refresh" gesture is performed.
reachBottom

Raised when the content is scrolled down to the bottom.
scroll

Raised on each scroll gesture.
updated

Raised each time the UI component is updated.

See Also