zoukankan      html  css  js  c++  java
  • 自定义scroll滚动条样式

    一般chrome浏览器自带scroll:

    添加scroll style

    
    
         
          /* 整个滚动条 */
            ::-webkit-scrollbar {
                 6px;
                background-color: #ffffff;
                display: none;
            }
            
            /* 鼠标指针浮动显示 */
            :hover::-webkit-scrollbar{
                display:block;
            }

            /* 滚动条轨道 */
            ::-webkit-scrollbar-track {
                /* 阴影 */
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                background-color: #ffffff;
            }

            /* 滚定条滑块 */
            ::-webkit-scrollbar-thumb {
                border-radius: 30px;
                background-color: #615b5b49;
            }
    
    

    -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    关于scroll:

    CSS滚动条选择器

    你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

    • ::-webkit-scrollbar — 整个滚动条.
    • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
    • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
    • ::-webkit-scrollbar-track — 滚动条轨道.
    • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
    • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
    • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

    语法

  • 相关阅读:
    抽象代数学习笔记
    WC2021 游记
    简单的数学题
    前缀和公式
    杜教筛
    [模板]BZOJ4756线段树合并
    SPOJ 694
    bzoj1367 可并堆
    莫比乌斯反演(理论)
    es6 Set数据结构
  • 原文地址:https://www.cnblogs.com/sener/p/15045001.html
Copyright © 2011-2022 走看看