An end user can scroll the ScrollView content with the swipe gesture or with the scrollbar. The swipe gesture is default for touch devices, the scrollbar is default for desktops. However, you can unify the behavior of the ScrollView on all platforms. To control the swipe gesture scrolling, use the
scrollByContent
property. To control the scrollbar scrolling, use the
scrollByThumb
property.
jQuery
JavaScript
HTML
$(function() {
$("#scrollViewContainer").dxScrollView({
scrollByContent: true, // enables the swipe gesture on all platforms
scrollByThumb: true // makes the scrollbar active on all platforms
<div id="scrollViewContainer"></div>
Angular
HTML
TypeScript
<dx-scroll-view
[scrollByContent]="true" <!-- enables the swipe gesture on all platforms -->
[scrollByThumb]="true"> <!-- makes the scrollbar active on all platforms -->
</dx-scroll-view>
<template>
<DxScrollView
:scroll-by-content="true" <!-- enables the swipe gesture on all platforms -->
:scroll-by-thumb="true" <!-- makes the scrollbar active on all platforms -->
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxScrollView } from 'devextreme-vue/scroll-view';
export default {
components: {
DxScrollView
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { ScrollView } from 'devextreme-react/scroll-view';
class App extends React.Component {
render() {
return (
<ScrollView
scrollByContent={true} {/* enables the swipe gesture on all platforms */}
scrollByThumb={true} {/* makes the scrollbar active on all platforms */}
export default App;
To scroll through ScrollView content by a specified distance, call the
scrollBy(distance)
method and pass a
Number
as a parameter. If you need to scroll in the opposite direction, the
distance
parameter should be a negative number.
To scroll content vertically and horizontally, call the
scrollBy(distance)
method with an object as an argument. The format of the object is the following: { left:
value1
, top:
value2
}. In this case, set the
direction
property to
"both"
:
To scroll the content to a specific position, call the
scrollTo(targetLocation)
method. Just like the
scrollBy()
method from the previous examples, the
scrollTo()
method accepts either a numeric value (when
directon
is
"left"
or
"right"
) or an object (when
direction
is
"both"
). The object should have the following format: { left:
value1
, top:
value2
}. Note that the top left corner of the ScrollView has the { left: 0, top: 0 } coordinates.
<div id="scrollButton"></div>
<div id="scrollViewContainer">
<!-- Here goes long content -->
<div id="end"></div>
$(function() {
var scrollView = $("#scrollViewContainer").dxScrollView({
height: 200,
width: 100,
direction: "vertical"
}).dxScrollView("instance");
$("#scrollButton").dxButton({
text: "Scroll",
onClick: function() {
// Scrolls the content to the element with the "end" id
scrollView.scrollToElement($("#end"));
Angular
HTML
TypeScript
<dx-button
text="Scroll"
(onClick)="scroll()">
</dx-button>
<dx-scroll-view
[height]="200"
[width]="100"
direction="vertical">
<!-- Here goes long content -->
<div id="end"></div>
</dx-scroll-view>
import { ..., ViewChild } from '@angular/core';
import { DxScrollViewModule, DxScrollViewComponent, DxButtonModule } from 'devextreme-angular';
// ...
export class AppComponent {
@ViewChild(DxScrollViewComponent, { static: false }) scrollView: DxScrollViewComponent;
// Prior to Angular 8
// @ViewChild(DxScrollViewComponent) scrollView: DxScrollViewComponent;
scroll() {
// Scrolls the content to the element with the "end" id
this.scrollView.instance.scrollToElement(document.querySelector('#end'));
@NgModule({
imports: [
// ...
DxScrollViewModule,
DxButtonModule
// ...
App.vue
<template>
<DxButton
text="Scroll"
@click="scroll">
</DxButton>
<DxScrollView
:ref="myScrollViewRef"
:height="200"
:width="100"
direction="vertical">
<!-- Here goes long content -->
<div id="end"></div>
</DxScrollView>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxButton } from 'devextreme-vue';
import { DxScrollView } from 'devextreme-vue/scroll-view';
const myScrollViewRef = 'my-scroll-view';
export default {
components: {
DxButton,
DxScrollView
data() {
return {
myScrollViewRef
methods: {
scroll() {
// Scrolls the content to the element with the "end" id
this.scrollView.scrollToElement(document.querySelector('#end'));
computed: {
scrollView: function() {
return this.$refs[myScrollViewRef].instance;
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Button } from 'devextreme-react';
import { ScrollView } from 'devextreme-react/scroll-view';
class App extends React.Component {
constructor(props) {
super(props);
this.scrollViewRef = React.createRef();
get scrollView() {
return this.scrollViewRef.current.instance;
render() {
return (
<Button
text="Scroll"
onClick={this.scroll}>
</Button>
<ScrollView
ref={this.scrollViewRef}
height={200}
width={100}
direction="vertical">
{/* Here goes long content */}
<div id="end"></div>
</ScrollView>
scroll = () => {
// Scrolls the content to the element with the "end" id
this.scrollView.scrollToElement(document.querySelector('#end'));
export default App;
To get the current scroll position against the top left corner, call the scrollOffset() method. It returns an object of the following format: { top: topScrollOffset, left: leftScrollOffset }. If you need to get only the top or left scroll offset, use the scrollTop() and scrollLeft() methods, respectively.
