Question

当我按下按钮时，我使用Javascript在我的html主体上设置'overflow：hidden'。但是当我这样做时，整个身体向左移动5个像素，因为滚动条的空间消失了。我该如何防止这种情况。

我无法将正文边距设置为特定大小，因为滚动条的宽度区分浏览器

Answer 1

由于上一个解决方案不再起作用（请参阅下面的原始答案），我遇到了另一个适用于我的解决方案，根据MDN，它应该适用于所有浏览器，IE从版本6。获得滚动条宽度的解决方案甚至有点简化：

在没有滚动条的情况下将div添加到正文并将其放在屏幕外

测量div的客户端宽度

将div设置为具有滚动条（使用css溢出样式）

再次测量div的clientWidth

删除div

返回两个宽度的差异

代码看起来像这样：

function scrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"></div>'); 
    // Append our div, do our calculation and then remove it 
    $('body').append(div); 
    var w1 = div.prop('clientWidth'); 
    div.css('overflow-y', 'scroll'); 
    var w2 = div.prop('clientWidth'); 
    $(div).remove();
    return (w1 - w2); 
}

here是一个有效的jsFiddle。

原始答案（为了完整起见）

Here是一个计算滚动条宽度的解决方案，你可以在这里结合其他一些答案（据我所知，你自己的知识）。

我们的想法是执行以下步骤：

将两个div添加到正文并将它们放在屏幕外

测量内部div的宽度

将外部div设置为溢出

测量内部div的宽度（再次）

删除divs

返回两个宽度的差异

以下是从引用页面复制的代码：

function scrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
    // Append our div, do our calculation and then remove it 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}

Answer 2

你可以尝试这个老技巧：

html {
  overflow-y: scroll; 
}

这样做会强制滚动条始终可见。

比较

normal JSFiddle

JSFiddle with the vertical scrollbar always there

Answer 3

以下是添加禁用的垂直滚动条的代码。如果在CSS中放置比CSS的其他部分更突出，它应该覆盖你对其他部分所做的任何事情。

html {
overflow-y: scroll;
}

Answer 4

你总是可以在你隐藏的内容周围放一个包装器，然后放置溢出：滚动div并溢出：隐藏在内容div上。

#wrapper { overflow-y: scroll; }
#content { overflow: hidden; }

请参阅随附的小提琴了解工作版

http://jsfiddle.net/15km/bfpAD/1/

溢出：隐藏但我仍然想要空滚动条

4 个答案:

原始答案（为了完整起见）