CSS彩色滚动条

最新推荐文章于 2024-09-10 05:29:40 发布

明月落乌江

最新推荐文章于 2024-09-10 05:29:40 发布

阅读量559

点赞数 1

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_54334713/article/details/127128792

版权

CSS 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何使用CSS来定制网页滚动条的样式，包括设置滚动条的宽度、高度、滑轨颜色、滑块颜色以及监听按钮颜色。通过使用::-webkit-scrollbar伪元素，可以实现滚动条的视觉美化，提升网页设计的整体感观。

摘要由CSDN通过智能技术生成

CSS彩色滚动条

CSS案例

把如下CSS代码粘贴到Style标签中，即可

::-webkit-scrollbar {
  /* 这是针对缺省样式 (必须的) */
  width: 5px;
  height: 8px;
}

::-webkit-scrollbar-track {
  /* 滚动条的滑轨背景颜色 */
  background-color: #fdfdfdd7;
}

::-webkit-scrollbar-thumb {
  /* 滑块颜色 */
  background-color: #49b1f5;
  background-image: -webkit-linear-gradient(45deg, hsla(0, 0%, 100%, .4) 25%, transparent 0, transparent 50%,      hsla(0, 0%, 100%, .4) 0, hsla(0, 0%, 100%, .4) 75%, transparent 0, transparent);
  border-radius: 2em;
}

 ::-webkit-scrollbar-button { 
 /*滑轨两头的监听按钮颜色*/
 background-color: #888888; 
} 

::-webkit-scrollbar-corner {
  /* 横向滚动条和纵向滚动条相交处尖角的颜色 这条其实没用，因为我的横向滚动条被隐藏了*/
  background-color: transparent;
}

.el-scrollbar_wrap {
  /* 隐藏横向滚动条 */
  overflow-x: hidden;
}