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/

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

编辑修改了代码示例以处理无效点击

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

1 个答案: