【如何用简单的几行CSS实现自定义的滚动条】

未曾遇你

已于 2022-06-27 14:47:26 修改

阅读量196

点赞数

分类专栏：页面交互文章标签： css javascript 前端

于 2022-06-27 14:44:47 首次发布

本文链接：https://blog.csdn.net/qq_44749901/article/details/125483541

版权

页面交互专栏收录该内容

5 篇文章 0 订阅

订阅专栏

预览：
在这里插入图片描述
注意：taphelp-ul为你需要滚动条的盒子类名

  .taphelp-ul::-webkit-scrollbar
    {
        border-radius: 10px;
        width: 10px;
        height: 16px;
        background-color: #F5F5F5;
      }
      .taphelp-ul::-webkit-scrollbar-track
      {
        /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
        border-radius: 10px;
        background-color: #ededed;
      }
      .taphelp-ul::-webkit-scrollbar-thumb
      {
        border-radius: 10px;
        /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
        background-color: #d5d5d5;
      }
      /* 火狐浏览器兼容 */
      * {
        scrollbar-color: #a0a0a0 #d4d4d4; /* 滑块颜色  滚动条背景颜色 */
        scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
      }

隐藏自带的滚动条

  .element::-webkit-scrollbar { width: 0 !important }
IE 10+
  .element { -ms-overflow-style: none; }
Firefox
  .element { overflow: -moz-scrollbars-none; }