溢出：隐藏，但我仍然想要空的滚动条 [英] Overflow: hidden but i still want to have the empty scrollbar

问题描述

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

我不能将body的margin设置为特定的大小，因为滚动条的宽度会在浏览器之间进行区分

解决方案

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

1. 将没有滚动条的div附加到身体并将其放置在屏幕外


2. 测量div的客户端宽度
   
3. 设置div为滚动条（使用css overflow style） li>
   
4. 再次测量div的客户端宽度


5. 删除div
   
6. 返回两个宽度的差值
li>

代码如下所示：

  function scrollbarWidth（）{ 
 var div = $（'< div style =width：50px; height：50px; overflow：hidden; position：absolute; top：-200px; left：-200px;>< / div> ）; 
 //追加我们的div，做我们的计算，然后删除它
 $（'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. 返回两个宽度的差异
   

这里是代码，从引用复制ced page：

  function scrollbarWidth（）{
 var div = $（'< div style =width： 50px; height：50px; overflow：hidden; position：absolute; top：-200px; left：-200px;>< div style =height：100px;>< / div>'）; 
 //追加我们的div，做我们的计算，然后删除它
 $（'body'）。append（div）; 
 var w1 = $（'div'，div）.innerWidth（）; 
 div.css（'overflow-y'，'scroll'）; 
 var w2 = $（'div'，div）.innerWidth（）; 
 $（div）.remove（）; 
 return（w1  -  w2）; 
} 
  

I set 'overflow:hidden' on my html body with Javascript when I press a button. But when I do that the whole body moves 5 pixels or so to the left because the space of the scrollbar is gone. How do i prevent that.

I can't set margin of the body to a specific size because the width of scrollbars differentiate between browsers

解决方案

Since the previous solution does not work anymore (see original answer below), I've come across another solution which works for me and, according to MDN, it should work in all browser, with IE starting from version 6. This solution to get the scrollbar width is even a bit simplified:

1. Append a div without a scrollbar to the body and position it off screen
2. Measure the client width of the div
3. Set the div to have a scrollbar (using css overflow style)
4. Measure the clientWidth of the div again
5. Remove the div
6. Return the difference of the two widths

And the code would look like this:

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

And here is a working jsFiddle.

---

Original answer (for completeness sake)

Here is a solution to calculate the width of a scrollbar, which you can use in conjuction with some of the other answers here (and your own knowledge as far as I can tell).

The idea is to do the following steps:

1. Append two divs to the body and position them off screen
2. Measure the width of the inner div
3. Set the outer div to overflow
4. Measure the width of the inner div (again)
5. Remove the divs
6. Return the difference of the two widths

And here is the code, copied from the referenced page:

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

这篇关于溢出：隐藏，但我仍然想要空的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！