干死该死的横向滚动条 -凯发ag旗舰厅登录网址下载

一、情景描述

开发者小蒋按照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实现

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

参考自：[张鑫旭的博客](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/

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的干死该死的横向滚动条的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。