New to Kendo UI for jQuery? Download free 30-day trial

Prevent PageSscroll When DropDownList is Opened


Product Progress Kendo UI DropDownList


How can I prevent the page scroll when the DropDownList is opened?


  1. Query the ul element of the DropDownList and attach a wheel event handler to its parent.
  2. Prevent the default action if the scroll is at the beginning or at the end of the DropDownList ListView.
<div id="example">
    <div id="example" style="min-height: 2000px; padding: 30px;">
        <input id="products" style="width: 400px" />

    $(function() {
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            dataSource: {
              transport: {
                read: {
                  dataType: "jsonp",
                  url: "",
            value: "74"

          var widget = $("#products").data("kendoDropDownList");

          widget.ul.parent().on("wheel", function(e) {
            var container = this;

            if ((container.scrollTop == 0 && e.originalEvent.deltaY < 0) ||
                (container.scrollTop == container.scrollHeight - container.offsetHeight &&
                 e.originalEvent.deltaY > 0)) {


In this article
Not finding the help you need? Improve this article