The keyboard navigation of the ScrollView is always available.
To enable it, use the Navigatable(true) configuration. For a complete example, refer to the demo on using the keyboard navigation of the ScrollView.
The ScrollView supports the following keyboard shortcuts:
| Shortcut |
Description |
Access key + W |
Focuses the widget |
| Shortcut |
Description |
Left arrow |
Switches to the previous item |
Right arrow |
Switches to the next item |
| Shortcut |
Description |
Enter |
Triggers a click for the button |
Space |
Triggers a click for the button |
| Shortcut |
Description |
Left arrow |
Focuses to the previous dot in the pager |
Right arrow |
Focuses to the next dot in the pager |
Enter |
Selects the focused item in the pager |
Space |
Selects the focused item in the pager |
@(Html.Kendo().ScrollView()
.Name("scrollView")
.EnablePager(true)
.Navigatable(true)
.ContentHeight("100%")
.Items(x =>
{
x.Add().Content("<div class='photo photo1'></div>");
x.Add().Content("<div class='photo photo2'></div>");
x.Add().Content("<div class='photo photo3'></div>");
x.Add().Content("<div class='photo photo4'></div>");
x.Add().Content("<div class='photo photo5'></div>");
x.Add().Content("<div class='photo photo6'></div>");
x.Add().Content("<div class='photo photo7'></div>");
x.Add().Content("<div class='photo photo8'></div>");
x.Add().Content("<div class='photo photo9'></div>");
x.Add().Content("<div class='photo photo10'></div>");
}
)
.HtmlAttributes(new { style = "height:515px; width:1022px; max-width: 100%" })
)
<kendo-scrollview name="scrollView" content-height="100%"
enable-pager="true"
navigatable="true"
style="height:515px; width:1022px; max-width:100%;">
<items>
<scrollview-item>
<content>
<div class='photo photo1'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo2'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo3'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo4'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo5'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo6'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo7'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo8'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo9'></div>
</content>
</scrollview-item>
<scrollview-item>
<content>
<div class='photo photo10'></div>
</content>
</scrollview-item>
</items>
</kendo-scrollview>