介绍
去除pc端100vw导致的滚动条
# pc端100vw的滚动条问题
- 当你在pc端使用100vw来充满屏幕的时候 就会出现很尴尬的情况 100vw他会计算页面的整体宽度 包括他也会计算滚动条 这就造成了页面底部也会出来滚动条 十分的难看 但是我们可以通过设置来处理
:root
选择器用匹配文档的根元素 可以理解为强覆盖 在HTML中根元素始终是HTML元素。- 建议放在
index.css
(全局css)的最底部 免得被覆盖
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
body {
// 鼠标样式
cursor: url('https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/arrow.cur'),auto;
}
- 还有一种网上抄的 有待考察
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
// 鼠标样式
cursor: url('https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/arrow.cur'),auto;
}