Parent Containers Continue to Scroll When the Last Grid Record Is Reached

Environment

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

1. Handle the scroll event of the scrollable container of the Grid.

2. 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>