An end user can scroll the List with a swipe gesture and with the scrollbar. Although by default the swipe gesture is active for mobile devices and the scrollbar is active for desktops, you can force any or both of them to be used on all platforms. For this purpose, set the scrollByContent or scrollByThumb option to true.

jQuery

JavaScript

$(function() {
    $("#listContainer").dxList({
        // ...
        scrollByContent: true, // the swipe gesture on all platforms
        scrollByThumb: true // the scrollbar on all platforms
    });
});

Angular

HTML

TypeScript

<dx-list ...
    [scrollByContent]="true" <!-- the swipe gesture on all platforms -->
    [scrollByThumb]="true"> <!-- the scrollbar on all platforms -->
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

The List employs native scrolling on most platforms, except non-Mac desktops and devices based on Android older than version 4. To employ native scrolling on all platforms without exception, assign true to the useNativeScrolling option. Note that if you assign false to this option, the List will simulate scrolling on all platforms.

jQuery

JavaScript

$(function() {
    $("#listContainer").dxList({
        // ...
        useNativeScrolling: true
    });
});

Angular

HTML

TypeScript

<dx-list ...
    [useNativeScrolling]="true">  
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

If simulated scrolling is used, you can specify when to show the scrollbar. For this purpose, use the showScrollbar option.

jQuery

JavaScript

$(function() {
    $("#listContainer").dxList({
        // ...
        useNativeScrolling: false,
        showScrollbar: 'always' // or 'onScroll' | 'onHover' | 'never'
    });
});

Angular

HTML

TypeScript

<dx-list ...
    [useNativeScrolling]="false"
    showScrollbar="always"> <!-- or "onScroll" | "onHover" | "never" -->
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

On mobile devices, the user can pull the List to scroll it slightly further than its top or bottom boundary. Once the user releases the List, it bounces back to the boundary position. You can disable this effect using the bounceEnabled option.

jQuery

JavaScript

$(function() {
    $("#listContainer").dxList({
        // ...
        bounceEnabled: false
    });
});

Angular

HTML

TypeScript

<dx-list ...
    [bounceEnabled]="false">  
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

If you want to disable scrolling completely, assign false to the scrollingEnabled option.

jQuery

JavaScript

$(function() {
    $("#listContainer").dxList({
        // ...
        scrollingEnabled: false
    });
});

Angular

HTML

TypeScript

<dx-list ...
    [scrollingEnabled]="false">  
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

API

The following table gives an overview of scrolling-related methods exposed by the List.

Method	Description
scrollHeight()	Returns the height of the scrollable content in pixels.
scrollToItem(itemIndex)	Scrolls the List to the item with a specific index.
scrollToItem(itemElement)	Scrolls the List to a specific DOM node.
scrollTo(location)	Scrolls the List to a location specified in pixels.
scrollBy(distance)	Scrolls the List from the current location by a distance specified in pixels.
scrollTop()	Returns a pixel-measured value that shows how far the List is scrolled from the top.

The following examples shows how to call these methods.

jQuery

JavaScript

var list = $("#listContainer").dxList("instance");
var listItems = list.option("items");

// Scrolls the List to the last item
list.scrollToItem(listItems.length-1);

// Scrolls a grouped List to the first item of the last group
list.scrollToItem({
    group: listItems.length-1,
    item: 0
});

JavaScript

// Finds the DOM nodes of all items and scrolls the List to the last node
var listItemNodes = $("#listContainer").find(".dx-list-item");
list.scrollToItem(listItemNodes[listItemNodes.length-1]);

// Finds the DOM nodes of all groups and scrolls the List to the last node
var listGroupNodes = $("#listContainer").find(".dx-list-group");
list.scrollToItem(listGroupNodes[listGroupNodes.length-1]);

JavaScript

var contentHeight = list.scrollHeight();
var scrolledFromTopBy = list.scrollTop();
list.scrollTo(200);
list.scrollBy(100);

Angular

TypeScript

import { ..., ViewChild } from "@angular/core";
import { DxListModule, DxListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxListComponent, { static: false }) list: DxListComponent;
    // Prior to Angular 8
    // @ViewChild(DxListComponent) list: DxListComponent;
    scrollToLastItem () {
        let listItems = this.list.instance.option("items");
        this.list.instance.scrollToItem(listItems.length-1);
    }
    scrollToLastGroup () {
        let listItems = this.list.instance.option("items");
        this.list.instance.scrollToItem({
            group: listItems.length-1,
            item: 0
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

TypeScript

import { ..., ViewChild } from "@angular/core";
import { DxListModule, DxListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxListComponent, { static: false }) list: DxListComponent;
    // Prior to Angular 8
    // @ViewChild(DxListComponent) list: DxListComponent;
    scrollToLastItem () {
        // Finds the DOM nodes of all items and scrolls the List to the last node
        let listItemNodes = document.getElementsByClassName("dx-list-item");
        this.list.instance.scrollToItem(listItemNodes[listItemNodes.length-1]);
    }
    scrollToLastGroup () {
        // Finds the DOM nodes of all groups and scrolls the List to the last node
        let listGroupNodes = document.getElementsByClassName("dx-list-group");
        this.list.instance.scrollToItem(listGroupNodes[listGroupNodes.length-1]);
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

TypeScript

import { ..., ViewChild } from "@angular/core";
import { DxListModule, DxListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxListComponent, { static: false }) list: DxListComponent;
    // Prior to Angular 8
    // @ViewChild(DxListComponent) list: DxListComponent;
    getListHeight() {
        return this.list.instance.scrollHeight();
    }
    getScrolledDistanceFromTop () {
        return this.list.instance.scrollTop();
    }
    scrollTo () {
        this.list.instance.scrollTo(200);
    }
    scrollBy () {
        this.list.instance.scrollBy(100);
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

Events

To execute certain commands when the List is scrolled, handle the scroll event. If the event handling function is not going to be changed during the lifetime of the widget, assign it to the onScroll option when you configure the widget.

jQuery

JavaScript

$(function () {
    $("#listContainer").dxList({
        // ...
        onScroll: function(e) {
            var scrollOffset = e.scrollOffset.top;
            var scrolledToTop = e.reachedTop;
            var scrolledToBottom = e.reachedBottom;
            // Handler of the "scroll" event
        }
    });
});

Angular

HTML

TypeScript

<dx-list ...
    (onScroll)="onScroll($event)">
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    onScroll (e) {
        var scrollOffset = e.scrollOffset.top;
        var scrolledToTop = e.reachedTop;
        var scrolledToBottom = e.reachedBottom;
        // Handler of the "scroll" event
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

If you are going to change the scroll event handler at runtime, or if you need to attach several handlers to this event, subscribe to it using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript

var scrollEventHandler1 = function(e) {
    // First handler of the "scroll" event
};

var scrollEventHandler2 = function(e) {
    // Second handler of the "scroll" event
};

$("#listContainer").dxList("instance")
    .on("scroll", scrollEventHandler1)
    .on("scroll", scrollEventHandler2);

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - Scrolling

User Interaction

jQuery

Angular

jQuery

Angular

jQuery

Angular

jQuery

Angular

jQuery

Angular

See Also

API

jQuery

Angular

See Also

Events

jQuery

Angular

See Also