干死该死的横向滚动条 -凯发k8官方网

一、情景描述

开发者小蒋按照1920*1080的分辨率进行开发，他写的所有元素的宽度都没有超过1920，但是却出现横向滚动条，小蒋百思不得其解，最终求教程序员大尤。

可能的问题原因：

任务栏左置，实际横向宽度只有1918

浏览器的竖向滚动条占了20px，横向宽度实际只有1900

二、解决办法

问题1：任务栏左置，实际横向宽度只有1918

当任务栏居左时，横向只有1918px。

2px被操作系统拿去做侧边栏感应了。

所以少了2px。

实践解决

右键—>任务栏设置-----> 调整至底部

问题2：浏览器的竖向滚动条占了20px，横向宽度实际只有1900

当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象。

不同浏览器滚动条占据的宽度并不相同。

可以通过，窗口的宽度 - body的宽度计算出 滚动条宽度：

console.log('chrome下滚动条的宽度', window.innerwidth - document.body.clientwidth)

运行效果如下：

各位可以自己去试试，看看你的浏览器滚动的宽度是不是17px

解决办法：

暴力法（overflow:hidden)

利用vw和calc实现

利用absolute实现

2.1 暴力法（overflow:hidden)

// width: 100vw 会占据视窗的全部宽度 // 超出的部分直接隐藏掉 #app {width: 100vw;overflow: hidden; }

这样永远也不会出现横向滚动条，但是一点，用户如果开个小窗口浏览网页，那么它的页面会丢失很多内容，而且无法横线滚动。

所以这种方法并不好。

2.2 利用vw和calc实现

既然浏览器滚动条会占17px，那么提前把空间占住不就可以了。

100vw是window的宽度，而容器的宽度100%就是除了滚动条的可用宽度，因此在没有滚动条时候calc(100% - 100vw)就是0，触发滚动条时候其值为负的滚动条宽度，我们将其赋值给容器的margin-right，即可巧妙补偿这个宽度的挤压，在滚动条存在的情况下容器宽度仍然占据整个视口的宽度。

同时必须得设置overflow-x: hidden; 把margin-right导致的超出部分给隐藏起来。

这种实现和方法1.1有同样的问题。用户如果开个小窗口浏览网页，那么它的页面会丢失很多内容，而且无法横线滚动。

2.3 利用absolute实现

关于浏览器出现滚动条和消失页面不滚动有了更加终极的凯发k8官方网的解决方案，经过大型项目实践已经验证相当具有可行性，这里特意分享下：

参考自：[张鑫旭的博客](https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/

html {overflow-y: scroll; }:root {overflow-y: auto;overflow-x: hidden; }:root body {position: absolute; }body {width: 100vw;overflow: hidden; }

这个方法同样会有上面的问题。只能说世界上没有完美的方法吧。或多或少都有点瑕疵。

如果你有更好的方法，请不吝赐教，在评论区发表你的观点。

参考文章：

https://segmentfault.com/a/1190000017044563 https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/

总结

以上是凯发k8官方网为你收集整理的干死该死的横向滚动条的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。