CSS滚动条选择器实例:性化滚动条的实现

本篇文章给大家通过实例介绍一下使用CSS滚动条选择器的方法,实现一个性化滚动条。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

【相关推荐:css在线手册

参考代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个性化滚动条</title>
    <style>
        div{
            width:600px;
            height:300px;
            border:1px solid #000;
            margin:60px 60px;
            overflow: hidden;
            overflow-y: scroll;
        }
        /*整个滚动条的样式*/
        div::-webkit-scrollbar{
            width: 14px;
            background-color: #f6f8fc;
        }
        /*滚动条轨道样式*/
        div::-webkit-scrollbar-track{
            background-color: #F1F1F1;
            border: 1px solid #f1f5fa;
        }
        /*滚动条滑块样式*/
        div::-webkit-scrollbar-thumb{
            background-color: #C0C0C0;
            border-radius: 0px;
            border-top: 1px solid #C0C0C0;
            border-bottom: 1px solid #C0C0C0;
            border-left: 1px solid #F1F1F1;
        }
        /*滚动条上的按钮--垂直滚动条向上按钮*/
        div::-webkit-scrollbar-button:decrement {
            height: 10px;
            background: url("./up.png") 0px 0px no-repeat;
            border:1px solid #F1F1F1;
        }
        /*滚动条上的按钮--垂直滚动条向下按钮*/
        div::-webkit-scrollbar-button:increment {
            height: 10px;
            background: url("./down.png") 0px -2px no-repeat;
            border:1px solid #F1F1F1;
        }
    </style>
</head>
<body>
    <div>
        <h1>CSS滚动条选择器</h1>
        <h3>可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式</h3>
        <ul>
            <li>::-webkit-scrollbar — 整个滚动条</li>
            <li>::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)</li>
            <li>::-webkit-scrollbar-thumb — 滚动条上的滚动滑块</li>
            <li>::-webkit-scrollbar-track — 滚动条轨道</li>
            <li>::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分</li>
            <li>::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分</li>
            <li>::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)</li>
        </ul>
        <hr>
        <h1>语法</h1>
        <p>::-webkit-scrollbar { styles here }</p>
        <h1>注意</h1>
        <p>该特性是非标准的,请尽量不要在生产环境中使用它!</p>
    </div>
</body>
</html>

素材:

(up.png)

(down.png)

效果图展示:

3.png

想要了解更多前端知识,可访问 前端开发学习!!

以上就是CSS滚动条选择器实例:性化滚动条的实现的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏