Colorbox 停止背景滚动并返回父页面上的相同位置

Posted 2023-02-15

【中文标题】Colorbox 停止背景滚动并返回父页面上的相同位置

【英文标题】：Colorbox stop background scroll and return to same location on parent page

【发布时间】：2012-08-26 03:34:30

【问题描述】：

我有一个在 drupal 7 中使用视图创建的无序列表。每个列表项都有一个打开颜色框的链接。如果将鼠标放在颜色框（即父页面）的褪色背景上，则可以滚动父页面。我所追求的是父页面在关闭时停止滚动并返回到父页面上的相同位置/锚点。

在这里搜索问题我找到了代码：

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

上面的代码可以工作，但会将父页面滚动回最顶部。

如果我可以动态执行，这将起作用；

$("html,body").scrollTop(400); // 300 is just a example

有什么想法吗？

【问题讨论】：

我不明白您的问题以及您所说的“停止背景滚动”是什么意思。也许你可以设置一个jsfiddle？总而言之，这听起来像是一个混乱的用户体验..

我已经更新了 Kannix 的帖子，希望它更清楚。

【参考方案1】：

kannix 明白了。我只是将溢出隐藏在body上，html的溢出可能没问题。

$(document).bind('cbox_open', function() 
    $('body').css( overflow: 'hidden' );
).bind('cbox_closed', function() 
    $('body').css( overflow: '' );
);​

但是，它不应该滚动回顶部。设置滚动顶部只是掩盖了另一个问题（例如不取消单击的锚元素上的默认操作）。

【讨论】：

杰克，完全错过了这条评论。我已经将两者结合起来并且有效。使用 var 位置；并删除 html 类并保留它现在可以工作的正文。

这完全解决了我的问题。我认为 scrollTop 解决方案是一种 hack。

【参考方案2】：

我认为你可以这样做：

var position;
$(document).bind('cbox_open', function() 
    position = $("html,body").scrollTop();
    $('html').css(
        overflow: 'hidden'
    );
).bind('cbox_closed', function() 
    $('html').css(
        overflow: 'auto'
    );
    $("html,body").scrollTop(position);
);​

【讨论】：

这是一个很好的解决方案，它确实有效。关闭颜色框后，有没有办法阻止它跳下页面。我认为由于将溢出隐藏在 css 中，它摆脱了滚动条并将所有内容移动到顶部。当您关闭颜色框然后它跳下页面时，它看起来有点错误 - 这有意义吗？

不明白你为什么这样设置overflow...当BODY的overflow被隐藏时，colorbox popup不能滚动（如果比可见区域长的话）！跨度>

此外，对我来说，这并不能解决我正在寻找答案的问题（当更改内容和/或整个颜色框的高度时，页面会自动滚动到顶部）。首先，玩页面溢出会阻止滚动颜色框（就像我在之前的评论中提到的那样），并且在“打开”处理程序中，滚动的当前位置为 0。

【参考方案3】：

对于 iphone/ipad，我有这个很好用的解决方案！

$(document).bind('cbox_open', function() 
    var position = $('body').scrollTop();
        $('body').attr("data-position", position);
        $('body').css(position : 'fixed', top: '-' + position + 'px');
    ).bind('cbox_closed', function() 
        $('body').css(position : 'relative', top: '0'); 
        var position = $('body').attr("data-position");
        $('body').scrollTop(position);
    );

【参考方案4】：

我有两个优化建议：

最好的方法是添加一个删除 css 类。如果您这样做，您可以肯定，在您离开后，一切都会“重置”。 如果您使用 cbox_cleanup 代替 cbox_closed，用户几乎不会注意到内容的“跳跃”。

因此我的解决方案是：

$(document).bind('cbox_open', function() 
  $('html').addClass("noScrollSimple");
).bind('cbox_cleanup', function() 
  $('html').removeClass("noScrollSimple");
);

.noScrollSimple 
  overflow:hidden;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>