这次的案例是京东移动端的横向滚动效果如下:
通常这种效果是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>