CSS实现横线滚动（隐藏滚动条）

最新推荐文章于 2024-05-24 17:17:32 发布

中二病早点下班

最新推荐文章于 2024-05-24 17:17:32 发布

阅读量852

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/drakseason/article/details/132155000

版权

这次的案例是京东移动端的横向滚动效果如下：
在这里插入图片描述

通常这种效果是swiper实现，但是需要引入第三方组件，占用不必要的资源，但是通过CSS可以简单实现该功能。
在这里插入图片描述
主要思路是大盒子嵌套小盒子，当里面的小盒子宽度超出大盒子的时候，设置溢出部分显示滚动条即：

.seckill-body {
    overflow-x: scroll;
}

然后再用CSS的伪元素隐藏滚动条，实现效果

/* 隐藏滚动条 */
.seckill-body::-webkit-scrollbar {
    display: none;
}

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>

.seckill-body {
    padding: 0.08rem 0 0rem 0.1rem;
    overflow-x: scroll;
    background: #fff;
}

/* 隐藏滚动条 */
.seckill-body::-webkit-scrollbar {
    display: none;
}

.seckill_wrap {
    width: 6.2rem;
}

.seckill_wrap>div {
    width: 0.57rem;
    float: left;
}

.seckill-img img {
    width: 100%;
    margin: 0 auto;
}

.seckill-text {
    margin-top: 0.1rem;
    color: #ff2727;
    font-size: 0.12rem;
    font-family: JDZhengHT-EN-Regular !important;
    text-align: center;
    font-weight: bold;
}

.seckill-text span {
    font-weight: normal;
}

.seckill-body .all {
    margin-left: 0.1rem;
    padding-top: 0.08rem;
    width: 0.2rem;
    height: 1rem;
    background: rgb(245, 245, 245);

}

.seckill-body .all i {
    display: block;
    margin: 0 auto;
    width: 0.12rem;
    height: 0.12rem;
    background: url(../images/jd-sprites.png) no-repeat -1.08rem -1.09rem / 2rem 2rem;
}

.seckill-body .all span {
    display: block;
    margin: 0.02rem 0.04rem 0;
    font-size: 0.12rem;
    color: #666;
}

/* 秒杀结束 */
    </style>
</head>
<body>
        <!-- 秒杀开始 -->
        <div class="seckill-wrap">
            <div class="seckill">
                <div class="seckill-body">
                    <div class="seckill_wrap clearfix">
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img2.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img3.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img4.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img5.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img6.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img7.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img8.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img9.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div>
                            <div class="seckill-img">
                                <a href="javascript:;">
                                    <img src="images/seckill-img10.dpg" alt="">
                                </a>
                            </div>
                            <div class="seckill-text">
                                <span>￥</span>449
                            </div>
                        </div>
                        <div class="all">
                            <a href="javascript:;">
                                <i></i>
                                <span>
                                    查 看 全 部
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</body>
</html>