zoukankan      html  css  js  c++  java
  • CSS——修改滚动条样式

    修改滚动条样式

    ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式,仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用。

    1、CSS代码如下,.todolist-content为待修改的className

      .todolist-content::-webkit-scrollbar {
        width: 5px;
        height: 10px;
        /* 整个滚动条*/
      }
      .todolist-content::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
      } 
      .todolist-content::-webkit-scrollbar-thumb {
        background: #bfbfbf;
        border-radius: 10px;
      }
      .todolist-content::-webkit-scrollbar-thumb:hover {
        background: #333;
      }
      .todolist-content::-webkit-scrollbar-corner {
        background: #179a16;
      } 

    3、参数说明

    • ::-webkit-scrollbar — 整个滚动条.
    • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
    • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
    • ::-webkit-scrollbar-track — 滚动条轨道.
    • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
    • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
    • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
    MDN参考地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

     

  • 相关阅读:
    open-falcon实现邮件报警
    open-falcon监控Flume
    Ubuntu下安装open-falcon-v0.2.1
    Python学习笔记——发邮件
    Flume的监控参数
    Ubuntu下安装Kafka Manager
    Ubuntu系统监控indicator-sysmonitor
    kafka性能测试
    Ubuntu下安装sbt
    Ubuntu安装shadow$ocks-libev
  • 原文地址:https://www.cnblogs.com/lcxcsy/p/13193515.html
Copyright © 2011-2022 走看看