只用css解决跳动滚动条问题

当我们使用样式“margin：0 auto”来实现网页内容居中的时候，回遇到这样的一个问题：

当页面在多内容和多内容切换的时候会出现主体内容抖动；

因为网页内容高度小于浏览器高度的时候滚动条是隐藏的，当网页内容高度大于浏览器高度的时候滚动条又出来了，这导致页面在水平方向会有小范围的位移；

经典解决样式如下：

Html:{

overflow-y:scroll;

}

这种处理方法会让滚动条总是保留在网页上面，不管是否你真的需要他。如果这个滚动条在不需要使用的情况下，它会变成灰色同时占用一定的宽度。页面永远不会出现内容跳动的问题，同时浏览器滚动条一直保留待用；

这样处理已经是非常完美的了。但是如果我们想解决这个问题呢。换一种说法，就是只有真的需要滚动条的时候才让它出现，同时解决页面跳动的问题。

我发现了一个使用”100vw“来解决这个问题的方法。100vw是指浏览器界面宽（包括滚动条和网页元素的宽）。使用CSS函数calc，我们可以获取这个页面和滚动条一样宽的左间距（无形的）。当滚动条没有出来的时候，这个间距它是隐藏的。不管是给右边距还是左边距，他的效果总是一样的。注意:技术这个滚动条宽度的方法只有当html标签有overflow:auto;的时候才会生效.

html{

margin-left:calc(100w - 100%);

margin-left:0;

}

这样处理会有个小问题：当你使用了响应式设计（当你需要的时候！），页面越小，它会变得特别明显”左边的间距会比右边大“。这个问题在移动设备上不会出现，因为在移动设备上不经常出现滚动条。但是在浏览器调整大小的时候，在桌面浏览器上上会显得特别丑。

可以使用以下代码，限制它只能在更大的视窗里面：

@media  screen  and (min-width:960px){

html{

   margin-left:calc(100w - 100%);

   margin-left:0;

 }

}

这里的960px是随意写的，它应该比你的主题网页内容宽度大一点（大概150px左右就好）；

这个诀窍它只在一些现代浏览器上工作。它会在旧的浏览器上优雅降权（页面仍旧会跳动）。旧的浏览器不会理解合格规则，所以他们会直接跳过它。

支持的浏览器包括，IE9、Chrome和Firefox，但是Opera（Classic）和Safari7不支持。由于WebKit在处理calc和新的界面尺寸（VM，vh，vmin和vmax）上的bug，我想Safari不会有效。我不是很清楚Opera Classic，但是更新的Opera是可以的，因为它基于Chromium源码的。

这是我第一次发布博客。我真想希望他是对别人有帮助的。在这同时，它是一个见证-它是真实有用的。因为这个是我自己写的博客引擎。

更新——

在被CSS-Tricks选中后，我烧毁了月1GB的带款。这页面最大的一部分内容是大约60kb足有的icon（html和css每个几乎不到1kb），我猜大于有15000个独立ip的浏览者！！我是新的博客。突然有这么多访问是。。。。。。。。非常的惊讶。

不管怎么说，在评论区我获得了一些评论。我在Google网站管理员工具中通过外部链接的形式。我没有一个关于我的页面，我仍旧不能获得统计数据或者任何数据接口，所以GWT是唯一我能里找到关于我的网站的的地方。

首先，Mark Senff的研究提供了一个有效的解决方法：

它存在一个副作用，它会隐藏网页右侧和滚动条大小一样宽度的内容，同时他还会禁用水平滚动。所以我个人不会使用它，。

Html{

width:100vw;

           Overflow-x:hidden;

}

我的滚动条处理技巧之适用于内容居中的设计，其他的一些情况不一定适用。他举了个例子包含一个占用全部浏览器屏幕的宽度标题,主要是左对齐。当然，例如一个标题它不会跳动特别明显。相比之下，下面的文本将非常适合它，并且我发现这个技巧可以适用于页面的一部分。我已经把一个劲简单的例子提交到了codepen.io.

其他在网络上的解决方法如下：

• Edwin Smith mentioned it on his blog on Smithy.com.
• Gavin Elster made a live (and good-looking) example on Codepen.io. I forked that one to give the example above, but my version is very ugly in comparison :)

                                                                                                                                                      谢谢所有人。

文章翻译：https://aykevl.nl/2014/09/fix-jumping-scrollbar