Kendo Window 滚动背景窗口答案

【问题标题】：Kendo Window Scrolling background windowKendo Window 滚动背景窗口
【发布时间】：2014-03-07 17:46:05
【问题描述】：

我弹出了一个剑道窗口，其中包含用户可以滚动浏览的信息。当通过鼠标滚动到达该窗口的底部/顶部时，背景窗口开始滚动。我希望能够在没有...的情况下关闭此功能

A) 制作剑道窗口模式

B) 将溢出设置为隐藏在 HTML->窗口打开时的正文

【问题讨论】：

标签： kendo-ui window scroll event-bubbling

【解决方案1】：

为了使窗口模式使用属性modal : true，用于控制打开时的滚动和关闭时恢复使用open 和close 事件处理程序。

var win = $("#win").kendoWindow({
    modal: true,
    open: function (e) {
        $("body").addClass("ob-no-scroll");
    },
    close: function(e) {
        $("body").removeClass("ob-no-scroll");
    }
}).data("kendoWindow");

在我的例子中，我添加了一个名为 ob-no-scroll 的 CSS 定义，然后在触发打开/关闭事件时添加/删除它。

这个 CSS 定义看起来像：

.ob-no-scroll { 
    overflow: hidden;
}

此处示例：http://jsfiddle.net/OnaBai/HkwLS/

【讨论】：

【解决方案2】：

这对我有用：

    $("#win1").kendoWindow({
        modal: true,
        open: function (e) {
            $("html, body").css("overflow", "hidden");
        },
        close: function (e) {
            setTimeout(function () { $("html, body").css("overflow", ""); }, 100);
        }
    });

【讨论】：

【解决方案3】：

2017 版

$("#id").kendoWindow({
        modal: true,
        open: function (e) {
            $("html, body").css("overflow", "hidden");
        },
        e.preventDefault();
        ...
    });

【讨论】：