如何防止滚动条重新定位网页？
我有一个中心alignment的DIV网站。 现在，有些页面需要滚动，有些则不需要。 当我从一种types移动到另一种types时，滚动条的外观将页面向几个像素移动。 有没有什么办法可以避免在每个页面上显式地显示滚动条？
溢出 – Y：滚动是正确的，但你应该使用它的HTML标签，而不是身体，否则你会得到一个双滚动条在IE 7
所以正确的CSS将是：
html { overflow-y: scroll; } 我想不是。 但造型body overflow: scroll应该做的。 你似乎知道，但是。
随着滚动总是显示，也许不好布局。
尝试用css3限制身体宽度
body { width: calc(100vw - 34px); }
vw是视口的宽度（请参阅此链接以获得一些解释）
calc在css3中计算
34px代表双滚动条宽度（如果您不信任固定大小，请参阅固定或计算此值 ）
我有同样的问题，但我只是有一个好主意：将你的可滚动元素的内容包装到一个div和应用padding-left: calc(100vw - 100%); 。
<body> <div style="padding-left: calc(100vw - 100%);"> Some Content that is higher than the user's screen </div> </body>
诀窍是100vw代表包含滚动条的视口的100％。 如果减去100% ，即没有滚动条的可用空间，则滚动条的宽度为0如果不存在，则为0 。 在左侧创build该宽度的填充将模拟第二个滚动条，将居中的内容移回右侧。
请注意，这只会在可滚动元素使用页面的整个宽度时才起作用，但大多数情况下这应该不成问题，因为只有less数其他情况下您已将可滚动内容居中。
我不知道这是不是一个旧的post，但我有同样的问题，如果你想垂直滚动只有你应该尝试overflow-y:scroll
html { overflow-x: hidden; margin-right: calc(-1 * (100vw - 100%)); }
例子 。 点击“更改最小高度”button。
使用calc(100vw - 100%)我们可以计算滚动条的宽度（如果不显示，则为0）。 build议：使用负边距右移，我们可以将<html>的宽度增加到这个宽度。 你会看到一个水平滚动条 – 它应该使用overflow-x: hidden 。
我已经解决了我的一个网站上的问题，通过显式设置在javascript中的正文宽度减去滚动条的宽度的视口大小。 我使用这里logging的基于jQuery的函数来确定滚动条的宽度。
<body id="bodyid> var bodyid = document.getElementById('bodyid'); bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";
我试图解决可能导致相同的问题，由twitter引导.modal-open课适用于body 。 解决schemehtml {overflow-y: scroll}不起作用。 我find一个可能的解决scheme是添加{width: 100%; width: 100vw} {width: 100%; width: 100vw}的html元素。
用这个扩展答案：
body { width: calc(100vw - 17px); }
一位评论者build议增加左派填补以保持中心：
body { padding-left: 17px; width: calc(100vw - 17px); }
但是，如果你的内容比视口宽，那么事情看起来就不正确。 要解决这个问题，你可以使用媒体查询，如下所示：
@media screen and (min-width: 1058px) { body { padding-left: 17px; width: calc(100vw - 17px); } }
其中1058px =内容宽度+ 17 * 2
这可以让水平滚动条处理x溢出，并在视口足够宽以包含固定宽度的内容时保持居中的内容居中
使用calc（100vw – 100％）发布的解决scheme在正确的轨道上，但是有一个问题：即使调整窗口的大小，滚动条的大小将永远保留在左侧内容填满整个视口。
如果您尝试通过媒体查询来解决这个问题，则会产生一个尴尬的alignment时刻，因为在调整窗口大小时，边距不会逐渐变小。
这是一个解决scheme，AFAIK没有缺点：
使用margin：auto来中心你的内容，而不是使用这个：
body { margin-left: calc(50vw - 500px); }
将500pxreplace为内容最大宽度的一半（因此在此示例中，内容最大宽度为1000px）。 内容将保持居中，边距将逐渐减小，直到内容填充视口。
为了在视口小于最大宽度时阻止边距变为负值，只需添加如下媒体查询：
@media screen and (max-width:1000px) { body { margin-left: 0; } }
Etvoilà！
如果改变大小或加载一些数据后，它是添加滚动条，那么你可以尝试下面，创build类和应用这个类。
.auto-scroll { overflow-y: overlay; overflow-x: overlay; }
我用这个问题，但简单的方法来解决这个问题（这适用于我）：
在CSS文件types上：
body{overflow-y:scroll;}
那简单！ 🙂
从Rapti的答案延伸出来，这样做同样适用，但是它为body的右侧增加了更多的边界，并且保留了html负边界，而不是增加额外的填充，这实际上可能会影响页面的布局。 这样，在实际页面上（大多数情况下）没有任何变化，并且代码仍然有效。
html { margin-right: calc(100% - 100vw); } body { margin-right: calc(100vw - 100%); }
使滚动条出现在div元素外面，防止div内容的重新定位。
使用静态宽度，我有我的div位置作为绝对。 为我工作。
#divID{ overflow: hidden; width: calc(1024px + 0); } #divID:hover{ overflow-y:scoll; }
相反， 即使内容没有溢出屏幕 ， 浏览器窗口上build议永久滚动条的接受答案，我宁愿使用：
html{ height:101%; }
这是因为如果内容实际溢出 ，滚动条的外观更有意义。
这比这更有意义。
我用了一些jquery来解决这个问题
$('html').css({ 'overflow-y': 'hidden' }); $(document).ready(function(){ $(window).load(function() { $('html').css({ 'overflow-y': '' }); }); });
@media screen and (min-width: 1024px){ body { min-height: 700px } }
