Question

我有一个链接，当点击时会覆盖带有黑色叠加层的内容并触发隐藏的面板从右侧滑入。这一切都很好但是当我滚动背景内容移动而不是面板内容时。什么是使背景内容不再“活动/可滚动”的最佳方法，只是滑动面板中的内容可以滚动直到它关闭？

以下是JSFiddle。

这是我的jquery

$('#sauceThumb').click(function(){
    $('#cover').fadeIn(200);
    $('#sauceDet').animate({
        right: "0"
    });
});
$('.close').click(function(){
    $('#sauceDet').animate({
        right: "-99999"
    });
    $('#cover').fadeOut(200);
});

＆安培; CSS

.workIndvWrapper {
width:80%;
background:#ff0000;
height:100%;
position:fixed;
right:-9999px;
z-index:999;}
#cover {
background:rgba(0, 0, 0, 0.6);
width:100%;
height:100%;
position:fixed;
z-index:10;
display:none;}

Answer 1

它不会像翻转开关一样简单，你必须通过将滚动溢出设置为隐藏，获取滚动位置并滚动窗口来实际从文档中删除滚动条，因为有些浏览器滚动到顶部删除溢出时，然后单击以删除叠加层时，返回滚动条并再次设置滚动位置

$('#sauceThumb').click(function () {
    $('#cover').fadeIn(200);
    $('#sauceDet').animate({
        right: "0"
    });
    var scrollPos = {
        top  : self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        left : self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    };
    $('body, html').data('scroll', scrollPos).css('overflow', 'hidden');
    window.scrollTo(scrollPos.top, scrollPos.left);
});
$('.close').click(function () {
    $('#sauceDet').animate({
        right: "-99999"
    });
    $('#cover').fadeOut(200);
    var pos = $('body, html').css('overflow', 'auto').data('scroll');
    window.scrollTo(pos.top, pos.left);
});

FIDDLE

滑动面板滚动焦点jquery

1 个答案: