Question

我正在使用Jquery Colorbox在colorbox弹出窗口中显示信息。

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

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

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

Answer 1

执行此操作的一种方法是在打开ColorBox对话框时将文档溢出设置为隐藏，然后在关闭时恢复。您可以绑定到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页面中运行了一个脚本，绑定到mousewheel事件，并在元素的底部停止传播。对于简单的ColorBox用法，您应该能够通过将mousewheel事件绑定到ColorBox框架中的可滚动元素来创建可重用的解决方案。

Answer 2

如果我理解正确，我相信我遇到了与colorbox atm相同/类似的问题。我发现这个解决方案适用于senechaux发布的opened issue over at GitHub。

我正在为可能遇到同样问题的未来访问者发布此替代解决方案。这可以转储到脚本中的任何位置。

$(document).on('cbox_open',function(){
  $(document.body).css('position','fixed');
}).on('cbox_closed',function(){
  $(document.body).css('position','');
});

Answer 3

如果您只想滚动颜色框而不是窗口本身，则可以

$(window).scroll(function() {
    $(this).scrollTop(0)
})

您可以进一步修改以满足您的需求。

检查http://jsfiddle.net/vQHDJ/

处的工作示例

Answer 4

您还可以将下一个事件添加到Colorbox初始，以在Colorbox打开时禁用主文档上的滚动：

jQuery('.selector').colorbox({
    onOpen: function(){
        $('body').css({ overflow: 'hidden' });
    },
    onClosed: function(){
        $('body').css({ overflow: '' });
    }
});

来源：http://www.jacklmoore.com/colorbox/faq/#faq-scrolling

注意：如果您希望在Colorbox关闭时溢出将返回到预览值，请不要使用overflow: 'auto'，而是使用overflow: ''。

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

4 个答案:

检查http://jsfiddle.net/vQHDJ/