CSS横向滚动条自定义样式

89 阅读 0 评论 59 点赞

我是靠谱客的博主瘦瘦樱桃，最近开发中收集的这篇文章主要介绍CSS横向滚动条自定义样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

接上一篇，有的时候在项目里面会使用到滚动条
但是浏览器默认的滚动条的样式不怎么好看
这个时候需要进行一些处理
一般用到两种
1:隐藏滚动条，但是可以支持滚动的方法

::-webkit-scrollbar {display:none}

示例：
https://www.jianshu.com/p/9efdb18d92a6

2：自定义滚动条样式

    .healthName::-webkit-scrollbar {
                /*滚动条整体样式*/
                width: 10px;
                /*高宽分别对应横竖滚动条的尺寸*/
                height: 6px;
            }
            
            .healthName::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                background-color: #02adf7;
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
            }
            
            .healthName::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background: #1b5aa9;
            }

示例：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>div横向滚动条</title>
        <style>
            .healthName {
                width: 900px;
                height: 100px;
                overflow-x: scroll;
                overflow-y: hidden;
                white-space: nowrap;
                /* 父级元素中的内容不换行 */
            }
            
            .healthName::-webkit-scrollbar {
                /*滚动条整体样式*/
                width: 10px;
                /*高宽分别对应横竖滚动条的尺寸*/
                height: 6px;
            }
            
            .healthName::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                background-color: #02adf7;
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
            }
            
            .healthName::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background: #1b5aa9;
            }
            
            .healthlist {
                display: inline-block;
            }
        </style>
    </head>

    <body>
        <div class="col-md-6  col-sm-6  col-xs-6  healthName">
            <!-- <div class="healthlist">
        <img class="img"  src="images/point.png"/>
        <p>张三丰</p>
        <p>89bpm</p>
        <p>120/78</p>
        </div> -->
        </div>
    </body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $.ajax({
            url: "health.json",
            data: {},
            type: 'GET',
            success: function(data) {
                var html = "";
                $.each(data, function(i, item) {
                    html += "   <div class='healthlist'>";
                    html += "<img class='img'  src=" + item.image1 + "/>";
                    html += "<p>" + item.doneNum + "</p>";
                    html += "<p>" + item.date + "</p>";
                    html += "<p>" + item.date + "</p></div>";
                })
                $(".healthName").append(html)

            }
        });
    </script>
</html>

json:

[
    {
        "image1": "images/fence/fence1.png",
        "doneNum": 130,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 80,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 90,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 110,
        "date": "120/78"
    }, {
        "image1": "images/fence/fence1.png",
        "doneNum": 52,
        "date": "120/78"
    }
]