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

Question

当我按下按钮时，我使用 Javascript 在我的 html 正文上设置了“溢出：隐藏”。但是当我这样做时，整个身体向左移动了 5 个像素左右，因为滚动条的空间已经消失了。我该如何防止这种情况。

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

Answer 1

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

1. 将不带滚动条的 div 附加到正文并将其放置在屏幕外
2. 测量div的客户端宽度
3. 将 div 设置为具有滚动条（使用 css 溢出样式）
4. 再次测量div的clientWidth
5. 删除 div
6. 返回两个宽度的差

代码如下所示：

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); 
}

这是一个工作的jsFiddle 。

---

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

这是一个计算滚动条宽度的解决方案，您可以将其与此处的其他一些答案结合使用（据我所知，还有您自己的知识）。

这个想法是执行以下步骤：

1. 将两个 div 附加到 body 并将它们放置在屏幕外
2. 测量内部div的宽度
3. 设置外部 div 溢出
4. 测量内部 div 的宽度（再次）
5. 删除 div
6. 返回两个宽度的差

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

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; 
}

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

比较：

普通的 JSFiddle

始终存在垂直滚动条的 JSFiddle

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/