CSS 修改滚动条样式 隐藏浏览器滚动条

2022年11月19日08:59:53
/* 滚动条整体部分 */div::-webkit-scrollbar{}/* 滚动条里面的滑块 */div::-webkit-scrollbar-thumb{}/* 滚动条的轨道的两端按钮 */div::-webkit-scrollbar-button{}/* 滚动条的滑槽 */div::-webkit-scrollbar-track{}/* 滚动条没有滑块的滑槽部分 */div::-webkit-scrollbar-track-piece{}/* 边角，（横纵）两个滚动条的交汇处 */div::-webkit-scrollbar-corner{}/* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */div::-webkit-resizer{}

注意这些属性只对webkit内核管用，兼容的方法:

  1. 隐藏滚动条时，可以用一个色块通过定位盖上去
  2. 将子级元素调大，父级元素使用overflow-hidden截掉滚动条部分。暴力且直接。

隐藏滚动条

body::-webkit-scrollbar{width: 0!important;display: none;}// Chrome、Opera
body{-ms-overflow-style: none;}// 微软
body{overflow: -moz-scrollbars-none;} // Firefox
  • 作者：海胆Sur
  • 原文链接：https://blog.csdn.net/I_fole_you/article/details/118067176
    更新时间：2022年11月19日08:59:53 ，共 561 字。