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

|| 我正在使用Jquery Colorbox在colorbox弹出窗口中显示信息。我已启用iframe，因此在打开新的颜色框时，如果内容多于颜色框的高度，则颜色框弹出窗口中的窗口会滚动。问题是如果我继续使用鼠标上的滚动按钮滚动到颜色框中的窗口末尾，并继续滚动整个窗口，而不仅仅是弹出窗口会向下滚动。有办法防止这种情况吗？希望这是有道理的。

已邀请:

4 个回复

豹芜澈

一种方法是通过在打开ColorBox对话框时将文档溢出设置为隐藏，然后在关闭对话框时将其还原为隐藏状态。您可以绑定到ColorBox使用的自定义jQuery事件：

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

当父窗口上的滚动条消失并重新出现时，会有一个小的跳跃。这让我感到困扰，所以我使用了这个SO问题中描述的mousewheel方法：防止滚动父元素？我的使用有点复杂，因为我正在ColorBox中使用iframe并显式设置滚动条。我在iframe页面中运行了一个脚本，该脚本绑定到mousewheel事件，并在元素底部停止了传播。对于简单的ColorBox使用，您应该能够通过将mousewheel事件绑定到ColorBox框架中的可滚动元素来创建可重用的解决方案。

慷祈霖黑

如果我正确理解，我相信我与colorbox atm会遇到相同/相似的问题。我在senechaux发布的GitHub上的一个未解决的问题中找到了适用于我的解决方案。我正在为可能遇到相同问题的任何将来的访客发布此替代解决方案。可以将其转储到脚本中的任何位置。

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

亲奋漏

您还可以在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: \'\'。

需复

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

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

您可以进一步修改以满足您的需求。在http://jsfiddle.net/vQHDJ/中查看工作示例

要回复问题请先登录或注册

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

4 个回复

发起人

colorbox

jquery

scroll

问题状态

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

与内容相关的链接

4 个回复

发起人

colorbox

jquery

scroll

问题状态