Question

正如标题所示，我正在尝试实现彩色叠加，其中叠加层位于顶部，用户无法向上滚动，因此如果从长页面中间打开叠加层，则会显示黑色区域。这个问题在移动设备上特别烦人。实际上，作为这个“愿望”的延伸，如果我们只能滚动到叠加层的末尾，而不是超过它，那将同样很棒。

解决这个问题的第一种方法可能是

固定位置，顶部：0方法

问题在于，假设您的叠加始终在窗口大小范围内。如果您的叠加层高于窗口大小并且需要滚动才能完整地查看它，则无法使用固定定位滚动叠加层

丑陋的解决方案是执行上述操作，将叠加层保持在保守的高度并允许彩色框中的滚动参数。然而，这是不理想的，因为它在某些浏览器上显示丑陋的滚动条。

所以我希望有人知道一种方法可以阻止向上滚动，当叠加层打开时？为了防止向下滚动覆盖，我希望有一些javascript sages启示。

提前致谢！

Answer 1

我们可以使用JavaScript为BG添加溢出

试试这段代码：

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

我在这里找到了这个：https://wordpress.org/support/topic/disable-background-scrolling-when-colorbox-layer-is-active?replies=3

为我工作

Answer 2

尝试设置body的css属性overflow：hidden，例如在jQuery中

$('body').css({overflow:'hidden'})

是否可以在页面顶部打开Colorbox叠加层但不允许向上滚动？

2 个答案: