zoukankan      html  css  js  c++  java
  • 如何调整滚动条的样式

    非标准
    该特性是非标准的,请尽量不要在生产环境中使用它!

    描述

    这个 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

    ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.

    CSS滚动条选择器

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

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

    语法

    ::-webkit-scrollbar { styles here }

    例子

    .visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
      display: block;
       10em;
      overflow: auto;
      height: 2em;
    }
    .invisible-scrollbar::-webkit-scrollbar {
      display: none;
    }
    
    /* Demonstrate a "mostly customized" scrollbar
     * (won't be visible otherwise if width/height is specified) */
    .mostly-customized-scrollbar::-webkit-scrollbar {
       5px;
      height: 8px;
      background-color: #aaa; /* or add it to the track */
    }
    /* Add a thumb */
    .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
        background: #000; 
    }
    <div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
    <div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
    <div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
    And pretty tall<br>
    thing with weird scrollbars.<br>
    Who thought scrollbars could be made weeeeird?</div>

    参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar




  • 相关阅读:
    在关闭窗体时弹出对话框
    使应用程序在进程中消失
    禁用窗口上的关闭按钮
    洛谷P1080 国王游戏
    洛谷P1443 马的遍历
    算法竞赛入门经典第二版 随笔1
    AcWing 794. 高精度除法
    AcWing 793. 高精度乘法
    AcWing 792. 高精度减法
    AcWing 791. 高精度加法
  • 原文地址:https://www.cnblogs.com/kunmomo/p/10191449.html
Copyright © 2011-2022 走看看