滑动面板滚动焦点 jquery

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