css如何去掉或修改浏览器默认滚动条

最新推荐文章于 2024-08-08 19:57:45 发布

最初都是小白

最新推荐文章于 2024-08-08 19:57:45 发布

阅读量5k

点赞数 1

分类专栏： Css 文章标签： css去掉默认滚动条

本文链接：https://blog.csdn.net/Originally_M/article/details/97242025

版权

Css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

去掉浏览器默认滚定条

在这里插入图片描述

很简单，只需在出现滚动条的元素加-webkit-scrollbar属性即可，代码如下：

     /* .box为当前出现滚动条的容器 */
	 .box::-webkit-scrollbar {
	    display: none
	  }

如果想改变它的样式：

	/*滚动条的宽度*/
.ant-drawer-wrapper-body::-webkit-scrollbar {
    width: 4px;
    height: 105px;
}


/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
.ant-drawer-wrapper-body::-webkit-scrollbar-track {
    width: 4px;
    height: 80%;
    background-color: #E0E6F3;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

/*滚动条的设置*/
.ant-drawer-wrapper-body::-webkit-scrollbar-thumb {
    background-color: #A4A9C1;
    background-clip: padding-box;
    min-height: 28px;
    max-height: 105px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    /* display: none; */
}

/*滚动条移上去的背景*/

/* .ant-drawer-wrapper-body::-webkit-scrollbar-thumb:hover {
    background-color: #fff;
} */

还有一种(效果在代码下方)：

::-webkit-scrollbar {
  width: 5px; 
  height: 10%
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;  
   border-radius: 10px;

} 
 
/* 滚动条的滑轨背景颜色 */
  ::-webkit-scrollbar-thumb {
  background-color: #A4A9C1;
  border-radius: 10px;
}