如何优雅的去掉页面滚动条
首先想到的肯定是使用overflow:hidden
,但是,当你使用时,你会发现,在将滚动条去掉的时候,页面会发生抖动。
那么,如何防止页面的抖动呢?
::-webkit-scrollbar {
width: 0px;
}
使用这个方式,能够将滚动条隐藏,页面仍然可以滚动,但是只支持webkit浏览器,兼容性并不好。
解决办法参考自张鑫旭博客(http://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://www.leevii.com/?p=788