如何优雅的去掉页面滚动条

该文章由 leevare 发布于 ,归类于 HTML/CSS

首先想到的肯定是使用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;
}

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒