13

我有一个使用视图在 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

有任何想法吗？

4

4 回答 4

17

坎尼克斯明白了。我只是隐藏身体上的溢出，html的溢出可能没问题。

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

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

于 2012-08-31T19:35:11.993 回答
12

我认为你可以这样做：

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);
});​
于 2012-08-31T14:30:27.323 回答
0

对于 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);
    });
于 2015-10-11T12:43:18.503 回答
0

我有两个优化建议：

  1. 最好的方法是添加一个删除 css 类。如果你这样做，你可以肯定，在你离开后，一切都会“重置”。
  2. 如果您使用 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>

于 2017-09-15T16:58:35.493 回答