Jquery Colorbox 滚动整个窗口，而不仅仅是 colorbox 内的内容

Question

我使用 Jquery Colorbox 在颜色框弹出窗口中显示信息。

我打开了 iframe，因此当新的颜色框打开时，如果内容多于颜色框的高度，则颜色框弹出窗口中的窗口会滚动。

问题是，如果我继续使用鼠标上的滚动按钮滚动到颜色框中窗口的末尾，并继续滚动整个窗口，而不仅仅是弹出窗口中的窗口，则会向下滚动。

有办法防止这种情况发生吗？希望这是有道理的。

Answer 1

实现此目的的一种方法是在打开 ColorBox 对话框时将文档溢出设置为隐藏，然后在关闭时恢复。您可以绑定(bind)到 ColorBox 使用的自定义 jQuery 事件:

$(document).bind('cbox_open', function () {
    $('html').css({ overflow: 'hidden' });
}).bind('cbox_closed', function () {
    $('html').css({ overflow: 'auto' });
}); 

父窗口上的滚动条消失和重新出现时有一个小跳跃。这让我很困扰，所以我使用了这个SO问题中描述的鼠标滚轮方法: Prevent scrolling of parent element?

我的使用有点复杂，因为我在 ColorBox 内使用 iframe 并显式设置滚动条。我在 iframe 页面内运行了一个脚本，绑定(bind)到鼠标滚轮事件，并在元素底部停止传播。对于简单的 ColorBox 使用，您应该能够通过将鼠标滚轮事件绑定(bind)到 ColorBox 框架中的可滚动元素来创建可重用的解决方案。