html自定义滚动条(整理)

教程管理员发布于2023-09-30 13:56 HTML教程 140

简介： html自定义滚动条(整理)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自定义滚动条</title>
        <style>
            .scroll-x {
                overflow-x: scroll;
                white-space: nowrap;
                width: 300px;
            }

            .scroll-x>.item {
                width: 80px;
                height: 80px;
                display: inline-block;
                line-height: 80px;
                font-size: 60px;
                color: #fff;
                text-align: center;
            }

            .scroll-x>.item:nth-child(2n) {
                background-color: #00f;
            }

            .scroll-x>.item:nth-child(2n+1) {
                background-color: #0fa;
            }
            .scroll-x::-webkit-scrollbar {
                width: 12px;
                height: 12px;
                color: #dddddd;
            }

            .scroll-x::-webkit-scrollbar-track {
                border-radius: 12px;
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                background-color: #dddddd;
                margin: 100px;  /* 很神奇，您试下-修改大小 */
            }

            .scroll-x::-webkit-scrollbar-thumb {
                border-radius: 12px;
                background-color: #ff5153;
            }
        </style>
    </head>

    <body>
        <div class="scroll-x">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
        </div>
    </body>

</html>

标签：#阿里 #自定义 #开发者 #滚动条 #社区 #html

上一篇：3、前端开发：HTML知识总结——常用字符实体总结
下一篇：html通过js调用ios或android代码

html自定义滚动条(整理)

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠