Parent Containers Continue to Scroll When the Last Grid Record Is Reached
Environment
Product | Progress Kendo UI Grid |
Progress Kendo UI version | 2017.3.913 |
Description
I have a scrollable Grid which is placed within a scrollable container. When I reach the top or bottom position of the Grid scrollbar, the scrolling is not prevented and the parent element starts to scroll.
Solution
Handle the
scroll
event of the scrollable container of the Grid.Conditionally prevent the scrolling when the scroll position is either at the top or at the bottom of the Grid.
<div id="example">
<div id="parentScrollableElement" style="overflow: auto; width: 600px; height: 600px;">
<div style="height: 1000px">
<div id="grid"></div>
</div>
</div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
$("#grid").find(".k-grid-content").on('mousewheel', function (e) {
var event = e.originalEvent;
var d = event.wheelDelta || -event.detail;
this.scrollTop += ( d < 0 ? 1 : -1 ) * 50;
e.preventDefault();
});
});
</script>
</div>