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

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product 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

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>