Skip to main content

滚动条相关

· One min read

解决方案

html {
overflow-y: scroll;
}

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

:root body {
position: absolute;
}

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

tuax/tua-body-scroll-lock: 🔐 Body scroll locking that just works with everything (github.com)

mdbootstrap/perfect-scrollbar: Minimalistic but perfect custom scrollbar plugin. Get more free components with Material Design for Bootstrap UI Kit (link below) (github.com)

overscroll-behavior - CSS: Cascading Style Sheets | MDN (mozilla.org)

相关参考

小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

浏览器滚动条导致的页面闪烁问题 - 掘金 (juejin.cn)

【Vue指令】解决移动端弹窗“滚动穿透”问题 - 掘金 (juejin.cn)

解决移动端滚动穿透 - 掘金 (juejin.cn)

重新认识滚动穿透 - 知乎 (zhihu.com)

【CSS】关于滚动条样式 - 掘金 (juejin.cn)