CSS实现内容可以滚动，不显示滚动条_css隐藏滚动条但能滚动

作者：木道寻08 | 2024-06-20 04:57:06

踩

css隐藏滚动条但能滚动

两种方式：

使用 padding
使用 ::webkit-scrollbar

第一种，使用padding

先把 body 的滚动条隐藏，隐藏横向滚动条；
把 main 元素的 overflow-y 设置为 scroll，让它可以垂直滚动；
把 main 元素的右侧间距 padding-right 设置为滚动条的宽度。根据操作系统会有不同，windows 数值大些；

第二种，使用 ::webkit-scrollbar


.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
 
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/738673