Scroller Overview
Starting with the R2 2023 release, Kendo UI will no longer ship Hybrid UI components. This means that the R2 2023 will be the last release to include Kendo Hybrid in the Kendo UI package. See full announcement in Kendo jQuery blog post. The last stable version that we recommend to use for Kendo Hybrid components is R3 2022 SP1.
The Hybrid UI Scroller widget enables touch-friendly kinetic scrolling for the contents of a given DOM element.
Getting Started
Each mobile View initializes a scroller for its content element. In addition to that, a scroller is initialized for every element with a role data-attribute set to scroller. Alternatively, a scroller can be initialized using jQuery plugin syntax in the containing mobile View init event handler.
Initialize from Markup
For the scroller to work, its element should have fixed dimensions—width and/or height—set.
The example below demonstrates how to initialize the Hybrid UI Scroller by using the role data-attribute.
<div data-role="scroller">
Foo
</div>
Initialize Using jQuery
The example below demonstrates how to initialize the Hybrid UI Scroller by using jQuery plugin syntax.s
<div id="scroller"></div>
<script>
var scroller = $("#scroller").kendoMobileScroller();
</script>
Obtain Current View Scrollers
The example below demonstrates how to obtain the current mobile view scroller.
<div data-role="view" data-init="getScroller">
Foo
</div>
<script>
function getScroller(e) {
var scroller = e.view.scroller;
}
</script>
Properties
The Hybrid UI Scroller widget exposes the following fields:
-
scrollElement—The inner Scroller element that holds the scrolling content. Use this field if you wish to change the element contents after the Scroller is initialized on it. -
scrollTop—The number of pixels that are hidden from view above the scrollable area. -
scrollLeft—The number of pixels that are hidden from view to the left of the scrollable area.