Kendo UI for jQuery ScrollView Overview
The ScrollView is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
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 ScrollView widget scrolls content that is wider than the mobile device screen.
The Hybrid Application by Kendo UI automatically initializes the mobile ScrollView for every element with role data attribute set to scrollview and present in the markup of the views. Alternatively, it can be initialized by using jQuery plugin syntax in the containing mobile View init event handler.
The Hybrid ScrollView supports two operation modes—standard and data-bound. The first one is suitable for displaying static content, while the second one provides remote data virtualization. If the ScrollView has a DataSource set during the initialization, it operates in a data-bound mode.
Initializing the Hybrid ScrollView
The following example demonstrates how to initialize the Hybrid UI ScrollView by using the data-role attribute.
<div data-role="scrollview">
Foo
</div>
The following example demonstrates how to initialize the Hybrid UI ScrollView by using jQuery plugin syntax.
<div data-role="view" data-init="initScrollView">
<div id="scrollView">
<div data-role="page">Foo</div>
<div data-role="page">Bar</div>
</div>
</div>
<script>
function initScrollView(e) {
e.view.element.find("#scrollView").kendoMobileScrollView();
}
</script>