css控制滚动条

thinkQuadratic

于 2025-03-16 14:44:56 发布

阅读量561

点赞数 11

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_46541579/article/details/146294478

版权

在开始说滚动条之前，先介绍下当前主流的浏览器和内核。

Blink 内核

Blink 内核是从 WebKit 内核分支而来，继承并优化了许多特性。它采用了多进程架构，每个标签页、插件等都可以在独立的进程中运行，这使得浏览器在处理多个复杂页面时，一个页面的崩溃或卡顿不会影响其他页面，大大提高了浏览器的整体性能和稳定性。

代表浏览器：Google Chrome、Microsoft Edge（新版）、Opera、Brave 等。

Gecko 内核

Gecko 内核以遵循网页标准而著称，它积极支持 W3C 等组织制定的各种标准，对于开发者来说，使用标准的 HTML、CSS 和 JavaScript 代码在 Firefox 上能得到很好的兼容和呈现。

代表浏览器：Mozilla Firefox。

WebKit 内核

webkit内核在资源占用方面相对较少，启动速度和页面加载速度较快，尤其适合在移动设备等资源有限的环境中使用。

代表浏览器：Safari（苹果公司的浏览器）、一些移动端浏览器（如 iOS 系统自带浏览器）。

正文开始

  <div class="box">
      <div class="demo1">
       AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>
    </div>

    <style>
      .box {
        width: 400px;
        margin: 200px auto;
        border: 1px solid;
      }
      .demo1 {
        overflow: auto;
      }
    </style>

先看下默认效果。这里使用的edge浏览器

修改滚动条样式

     /*定义滚动条整体样式   WebKit 内核浏览器中，滚动条样式的设置是基于一个层级结构的
       ::-webkit-scrollbar 是整个滚动条的顶级选择器，它代表滚动条的整体部分，
       而 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 是滚动条的子部分。 
       不定义滚动条整体样式的话，定义滚动条轨道，圆角等其他样式的时候就不生效了*/

      ::-webkit-scrollbar {
        width: 0px; 
      }
      /* 定义 轨道背景颜色 */
      ::-webkit-scrollbar-track {
        background: #8d8c8c; 
      }
      ::-webkit-scrollbar-thumb {
        background: #da3d3d; /* 滑块背景颜色 */
        border-radius: 0px; /* 滑块圆角 */
      }
      /* 定义滚动条滑块悬停时的样式 */
      ::-webkit-scrollbar-thumb:hover {
        background: #1fbb46; 
      }

效果

这里在edge浏览器中样式都生效了，但是在火狐浏览器中打开的时候，样式没有生效。

在火狐浏览器中，主要通过scrollbar-width属性和scrollbar-color来控制滚动条样式的

        .demo1 {
            scrollbar-width: 20px; /* 可选值：auto | thin | none */
            scrollbar-color: red yellow; /* 第一个值是滑块颜色，第二个值是轨道颜色 */
        }

效果

使用@supports来判断当前浏览器的内核

   /* 检测 WebKit/Blink 内核 */
      @supports (-webkit-appearance: none) {
        /* 这里放置仅在 WebKit/Blink 内核浏览器中生效的样式 */
        .demo1 {
          background-color: lightblue;
        }
      }

      @supports (-moz-appearance: none) {
        /* 这里放置仅在 Gecko 内核浏览器中生效的样式 */
        .demo1 {
          background-color: lightgreen;
        }
      }

效果

end

如有误欢迎指正