找出滚动条宽度以阻止内容移动

Question

我有一个隐藏面板，当您单击灰色框时，面板会从右侧加载。但是，我想这样做，以便一旦面板可见，就只能在面板内滚动，而不能滚动正文内容。

我让这一切正常工作，但是为了实现这一点，滚动条从主要内容中消失了，这会将内容稍微向右移动，然后重新出现在滑动面板上。

您可以看到问题here 的实时版本。如果您滚动到底部并单击灰色框，它将激活并在面板中滑动。

我也有一个JSFiddle，但问题实际上并没有在这里重现。我认为这可能是因为它在一个框架中。

我认为解决此问题的最佳方法是确定滚动条的宽度并确保主体中的内容不会移动。我发现这段代码应该计算出滚动条的宽度，但我不确定如何将它合并到我的脚本中。

这是我的脚本。

$('#sauceThumb').click(function () {

$('#mainContent').addClass('blur');
$('#sauceDet').animate({
    right: "0"
}, 700, 'linear');
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, #cover').click(function () {
    $('#sauceDet').animate({
        right: "-9999px"
    }, 1500, 'linear');
    $('#mainContent').removeClass('blur');
    $('#cover').fadeOut(200);
    var pos = $('body, html').css('overflow', 'auto').data('scroll');
    window.scrollTo(pos.top, pos.left);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

Answer 1

这是一种在基础内容的父容器中添加和删除宽度的方法：

var scrollbarWidth = parseInt(getScrollBarWidth (),10); //get width of scroll bars, assume its constant
$('#sauceThumb').click(function () {
    if($('#sauceDet').css("right") === "-9999px") // don't do anything if panel is already being shown
    {    
        $('#mainContent').addClass('blur');
        $('#sauceDet').animate({
        right: "0"
        }, 700, 'linear');
        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');
        $('body').css('margin-right',parseInt($('body').css('margin-right'),10) + scrollbarWidth + 'px'); // add width to body margin
        window.scrollTo(scrollPos.top, scrollPos.left);
    }    
});
$('.close, #cover').click(function () 
{
    $('#sauceDet').animate({
        right: "-9999px"
    }, 1500, 'linear');
    $('#mainContent').removeClass('blur');
    $('#cover').fadeOut(200);
    var pos = $('body, html').css('overflow', 'auto').data('scroll');
    $('body').css('margin-right',parseInt($('body').css('margin-right'),10) - scrollbarWidth + 'px'); // remove width from body margin
    window.scrollTo(pos.top, pos.left);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";
    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);
    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;
    document.body.removeChild (outer);
    return (w1 - w2);
};

小提琴 - http://jsfiddle.net/x5Bhf/6/

请注意，当您的面板出现时，小提琴内容确实会垂直移动，因为主体的高度会发生变化，您可能需要也可能不需要在原始代码中对此进行补偿。

EDIT修改代码示例以处理无效点击