Javascript 当垂直滚动条出现时，如何阻止Web内容向左移动？2017年意见汇总表_Javascript_Jquery_Html_Css

Javascript 当垂直滚动条出现时，如何阻止Web内容向左移动？2017年意见汇总表

javascript jquery html css

Javascript 当垂直滚动条出现时，如何阻止Web内容向左移动？2017年意见汇总表,javascript,jquery,html,css,Javascript,Jquery,Html,Css,许多程序员询问如何在垂直滚动条出现时阻止其网页内容（尤其是居中的网页内容（margin:0auto；）水平移动（被推）。对于Ajax用户和像我这样使用隐藏的div和tab来组织数据的人来说，这一直是个问题当当前显示的页面发生更改，导致显示的材质高度（内部窗口高度）突然大于物理窗口高度时，就会出现问题所有的滚动条并不是平等创建的，这一事实加剧了这个问题。不同的浏览器提供不同的滚动条宽度，这种差异无法（或者至少不应该）预测。简而言之，理想的解决方案是与滚动条宽度无关的 <script

许多程序员询问如何在垂直滚动条出现时阻止其网页内容（尤其是居中的网页内容（

margin:0auto；

）水平移动（被推）。对于Ajax用户和像我这样使用隐藏的div和tab来组织数据的人来说，这一直是个问题

当当前显示的页面发生更改，导致显示的材质高度（内部窗口高度）突然大于物理窗口高度时，就会出现问题

所有的滚动条并不是平等创建的，这一事实加剧了这个问题。不同的浏览器提供不同的滚动条宽度，这种差异无法（或者至少不应该）预测。简而言之，理想的解决方案是与滚动条宽度无关的

<script>
function updateWindow(){
    document.body.style.paddingLeft = (window.innerWidth - document.body.clientWidth);
    document.body.onclick=function(){
            document.body.style.paddingLeft = (window.innerWidth - document.body.clientWidth);
    }
}
window.onload=updateWindow();
window.addEventListener("resize", updateWindow());
updateWindow();
</script>

因此，这是一个自我回答的问题，自2017年8月5日起，将所有这些答案连同对其有用性的评论（如有可能）以及我自己的解决方案汇总成一个单一答案。我已经把我能找到的所有问题都标记为重复的，这样人们就可以找到关于这个问题的全面讨论

请注意，这个答案解决了身体内容物移动的问题。如果有固定高度的DIV存在移位问题，则应将DIV宽度设置为固定（

px

）宽度，使其滚动条浮动在文本上方，并添加一些右侧填充，以防止文本落到下方。贡献者：， ,

在讨论单个解决方案之前，应该提到它们分为三类：CSS、CSS3和基于Javascript的解决方案

CSS解决方案往往是脊状的，但非常可预测，并且得到了很好的支持

CSS3解决方案具有与Javascript类似的CPU计算成本，但易于实现。然而，在2017年之前的几年中，他们在浏览器中偶尔得到支持。随着时间的推移，情况正在改善。最终，它们可能是最好的解决方案，但我自己今天的调查表明，支持还不够一致，而且传统浏览器支持也不存在

Javascript解决方案（无论是纯Javascript还是jQuery）都需要额外的编码，以使其健壮，因为它们不支持（例如）窗口大小调整。然而，它们是最可预测和最向后兼容的，同时仍然保持页面的美观。我认为传统浏览器的行位于IE6和IE7之间。坦白地说，我向仍在使用这么旧的浏览器的人表示哀悼

请注意，我没有包含以前发布到Stack Exchange的所有CSS3和Javascript解决方案。有些虽然新颖，但有很大的弱点，因此没有包括在这里

解决方案#1:CSS解决方案

贡献者：

强制滚动条始终处于打开状态

<style>
html {
    overflow-y: scroll;
}
</style>

这会激活滚动条背景，但不会激活滚动条选项卡，除非垂直内容实际上溢出了窗口的底部边缘。然而，它也有同样的缺点，无论是否需要，滚动条空间都会被永久性地占用

解决方案#1b：更现代的解决方案

贡献者：

浏览器开始使用滚动条的

overlay

值，模仿IE10+的浮动滚动条

<style>
html {
    overflow-y: overlay;
}
</style>

解决方案#2b：基于身体的解决方案

贡献者：

这是一个固定滚动条宽度的解决方案，它与浏览器无关。要使其独立于浏览器，必须包含Javascript以确定滚动条的宽度。计算宽度但不重新合并值的示例如下：

请注意，下面的代码片段已在Stack Exchange和Internet上的其他位置上逐字发布多次，但没有确定的归属

解决方案#3a：测量滚动条宽度

贡献者：

这是一个不太有价值的解决方案，它需要时间来测量滚动条的宽度

<script>
var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}
</script>
<style>
body {
    overflow-x: hidden;
}
</style>


var checkScrollBars=函数（）{
变量b=$（“主体”）；
var-normalw=0；
var-w=0；
如果（b.prop（'scrollHeight'）>b.height（））{
normalw=window.innerWidth；
scrollw=normalw-b.width（）；
$（'#container'）.css（{marginRight:'-'+scrollw+'px'}）；
}
}
身体{
溢出x：隐藏；
}

后果

与其他解决方案一样，此解决方案永久禁用水平滚动条。

@mercator，我已经将该帖子和其他9或10个帖子标记为该帖子的副本——我怀疑我是否找到了该问题的所有副本。此外，这篇文章并没有回答我最初的问题，也没有一个全面的答案。这篇文章的票数较少，但它更老：@Salaman a。。。我也已经标记了那个。自2009年以来，有很多这样的产品都没有被标记为彼此重复的产品。老实说，我只是想帮大家一个忙，把所有好的数据集中到一个地方——特别是因为他们没有一个人以适合我的方式回答这个问题。这个问题的要素不是由所指出的任何一个问题来回答的，事实上，也不是由11个已知的“重复”问题中的任何一个来回答的（我相信其中没有一个问题被标记为“重复”），这个Q/A旨在取代。然而，我很高兴接受您的裁决，因为页面将保持完整，以帮助他人，这是它的意图。谢谢，这是金子！非常感谢你+1.

<style>
body {
    padding-left: 17px;
    width: calc(100vw - 17px);
}
@media screen and (min-width: 1058px) {
    body {
        padding-left: 17px;
        width: calc(100vw - 17px);
    }
}
</style>

<style>
body {
    margin-left: calc(50vw - 500px);
}
@media screen and (max-width: 1000px) {
    body {
        margin-left: 0;
    }
}
</style>

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

<body>
    <div style="padding-left: calc(100vw - 100%);">
    My Content
    </div>
</body>

<style>
html {
    width: 100%;
    width: 100vw;
}
</style>

<style>
body {
    overflow-x: hidden;
}
#wrap-wrap {
    width: 100vw;
}
#content-wrap {
    margin: 0 auto;
    width: 800px;
}
</style>

<script>
function updateWindow(){
    document.body.style.paddingLeft = (window.innerWidth - document.body.clientWidth);
    document.body.onclick=function(){
            document.body.style.paddingLeft = (window.innerWidth - document.body.clientWidth);
    }
}
window.onload=updateWindow();
window.addEventListener("resize", updateWindow());
updateWindow();
</script>

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        if(xmlhttp.responseText == 'false'){
            //Error processing here
        } else {
            //Success processing here
            updateWindow();
        }
    }
}

<script>
var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}
</script>
<style>
body {
    overflow-x: hidden;
}
</style>