如何使用 Javascript 防止页面滚动上的剑道下拉列表折叠？

Posted 2023-05-07

【中文标题】如何使用 Javascript 防止页面滚动上的剑道下拉列表折叠？

【英文标题】：How to Prevent Collapsing of Kendo Dropdown List on Page Scroll using Javascript?

【发布时间】：2016-07-18 10:14:25

【问题描述】：

我现在面临一个奇怪的问题，并试图实现3个解决方案，但它并没有为我工作了。 P>

问题是与剑道下拉默认功能上外页面滚动塌陷。我想防止崩溃，做了一些研究。

我有一个溶液here以防止这一点，但根据本工作正常的预览强>有示出，但相同的是不是在道场（右上链路）工作段并在真实的项目。

有任何差别，我可以看到这防止下拉的塌缩在预览而非在的道场强>

请帮我解决同我在剑道一个新手。 P>

【问题讨论】：

我建议你创建在Telerik的论坛上一个帖子。我分析预览代码和道场，它是相同的。跨度>

【参考方案1】：

我认为您需要处理小部件的 close 事件才能控制此行为。 这是一个例子：

 <input id="dropdownlist" />
    <script>
        $("#dropdownlist").kendoDropDownList(
          dataSource: [ "text1", "text2" ],
          close: _myClose.bind(this)
        );

        var _myClose = function (e) 
            var wish = true;
            var element = e.sender;
            if (wish) 
                e.preventDefault();
            
        ;
</script>

我绑定 this 以便您可以利用您的类属性。如果需要，您可以将其删除。 kendo 小部件实例在 e.sender 对象下可用。

这里是Docs 的链接。 希望能帮助到你。

【参考方案2】：

 $(".k-list-container").each(function () 
    var elementId = this.id.split("-")[0];
    var widget = $("#" + elementId).data("kendoDropDownList");
    if (widget) 
        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)) 
                e.preventDefault();
                e.stopPropagation();
            
        );
    
);

【参考方案3】：

只要剑道下拉列表打开并且鼠标悬停在列表选项上，我发现这个简单的 sn-p 可以可靠地禁用页面滚动。

// Fix annoyance where entire page scrolls when you scroll to the bottom of a dropdown
$(document).bind('mousewheel DOMMouseScroll', function (e) 
    var kendoDropdownBoxes = $('.k-list-container[style*="display: block"]');
    if (kendoDropdownBoxes.length > 0 && kendoDropdownBoxes.is(':hover')) 
        $("body").css("overflow", "hidden");
     else 
        $("body").css("overflow", "auto");
    
);