浏览器y轴滚动条占据宽度，导致出现x轴滚动条的解决方案

最新推荐文章于 2024-01-10 17:45:35 发布

今夕何夕

最新推荐文章于 2024-01-10 17:45:35 发布

阅读量1.8k

点赞数 1

分类专栏：笔记文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_50290552/article/details/126855121

版权

笔记专栏收录该内容

38 篇文章 3 订阅

订阅专栏

当开发的网页出现y轴滚动条时，而你某个最外层元素的宽度用的是width: 100vw；或者width: 100%;时，这时候网页就会出现x轴的滚动条，但这个x轴滚动条是不需要的，且很难看。x轴滚动条出现的原因是y轴滚动条的宽度也占据了位置，导致视图缺少了这部分宽度，所以出现了x轴滚动条。
在style标签内添加以下样式即可将x轴滚动条隐藏：

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}