DevExtreme Angular - Scroll the Content

User Interaction

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 option. To control the scrollbar scrolling, use the scrollByThumb option.

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>
  • import { DxScrollViewModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxScrollViewModule
  • ],
  • // ...
  • })

API

To scroll the ScrollView content by a specified distance, call the scrollBy(distance) method. If you need to scroll in the opposite direction, the distance parameter should be a negative number.

HTML
TypeScript
  • <dx-button
  • text="Scroll Up"
  • (onClick)="scrollUp()">
  • </dx-button>
  • <dx-button
  • text="Scroll Down"
  • (onClick)="scrollDown()">
  • </dx-button>
  • <dx-scroll-view
  • [height]="200">
  • <div>Content</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;
  •  
  • scrollUp() {
  • this.scrollView.instance.scrollBy(-100);
  • }
  •  
  • scrollDown() {
  • this.scrollView.instance.scrollBy(100);
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxScrollViewModule,
  • DxButtonModule
  • ],
  • // ...
  • })

To scroll the content both vertically and horizontally, call the scrollBy(distanceObj) method with an object as an argument. The format of the object is the following: { left: value1, top: value2 }. Note that in this case, the direction option must be set to "both"

HTML
TypeScript
  • <dx-button
  • text="Scroll"
  • (onClick)="scroll()">
  • </dx-button>
  • <dx-scroll-view
  • [height]="200"
  • [width]="100"
  • direction="both">
  • <div>Content</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() {
  • this.scrollView.instance.scrollBy({ left: 100, top: 100 });
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxScrollViewModule,
  • DxButtonModule
  • ],
  • // ...
  • })

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.

HTML
TypeScript
  • <dx-button
  • text="Scroll"
  • (onClick)="scroll()">
  • </dx-button>
  • <dx-scroll-view
  • [height]="200"
  • [width]="100"
  • direction="vertical">
  • <div>Content</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() {
  • this.scrollView.instance.scrollTo(300);
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxScrollViewModule,
  • DxButtonModule
  • ],
  • // ...
  • })

To scroll the content to a specific element, call the scrollToElement(targetLocation) method.

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
  • ],
  • // ...
  • })

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.

See Also