Question

我有一个无序列表，我使用视图在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

有什么想法吗？

Answer 1

kannix得到了它。我只是隐藏身上的溢出物，html的溢出可能很好。

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

但是，它不应该滚动到顶部。设置scrolltop只是在解决另一个问题（例如不取消对单击的锚元素的默认操作）。

Answer 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);
});

Answer 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);
    });

Answer 4

我有两个优化建议：

最好的方法是添加一个删除css类。如果你这样做，你可以肯定的是，一切都变得如此......重置了＃34;你离开后。
如果您使用cbox_cleanup支持cbox_closed，用户几乎不会注意到＆＃39; jump＆＃39;的内容。

因此我的解决方案是：

＆＃13;

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

＆＃13;

.noScrollSimple {
  overflow:hidden;
}

＆＃13;

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

＆＃13;

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

4 个答案: