解决滚动条出现挤压页面宽度

最新推荐文章于 2024-04-22 14:02:46 发布

转载最新推荐文章于 2024-04-22 14:02:46 发布 · 2.6k 阅读

文章标签：

#滚动条 #css

html/css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种解决网页中滚动条出现时挤压页面宽度的方法，通过调整HTML和body元素的样式来确保页面布局不受滚动条影响，适用于前端开发。

方法来自张鑫旭大佬：原文链接

/* 解决滚动条出现挤压页面宽度开始 */
html {
  overflow-y: scroll;     //兼容ie8，不支持:root, vw
}

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

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}
/* 解决滚动条出现挤压页面宽度结束 */