作者
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。 目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。
目录
CSS滚动条
落霞与孤鹜齐飞 6月30日 14 0 0 14 0 0

自定义滚动条目前主要兼容webkit内核浏览器

下面是滚动条的选择器说明

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb 滚动条的移动部分
  • ::-webkit-scrollbar-track 滚动条的滚动轨道
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,通过点击可以微调位置
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分
  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

自定义全局滚动条

<style>
    ::-webkit-scrollbar {
        width: 6px;
        background-color: #000;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #f90;
    }
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #0bc;
    }
</style>
<body style="height: 150vh;">

</body>

元素滚动条

<style>
    ::-webkit-scrollbar {
        width: 6px;
        background-color: #000;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #f90;
    }
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #0bc;
    }
    #scroll {
        width: 300px;
        height: 400px;
        overflow: auto;
        border: 1px solid #0f0;
    }
    #scroll::-webkit-scrollbar {
        width: 4px;
    }
    #scroll::-webkit-scrollbar-thumb {
        background-color: #abcdef;
    }
</style>
<body style="height: 150vh;">
    <div id="scroll">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
    </div>
</body>

如图 可以看到如何设置元素局部和全局滚动条样式了。

值得注意的时,此样式目前只兼容 webkit 内核浏览器
例如在IE11下

最后如何实现想要滚动时才出现滚动条呢,只需要加上hover伪类即可

#scroll {
    width: 300px;
    height: 400px;
    overflow: hidden;
    padding-right: 4px;
    border: 1px solid #0f0;
}
#scroll:hover {
    overflow: auto;
    padding-right: 0;
}
扫码分享到移动端
0 条评论
快来写一写读后感吧~
参与评论互动
登录即可参与评论互动哦