CSS实现横线滚动（隐藏滚动条）
最新推荐文章于 2023-12-12 10:58:38 发布
中二病也要写前端
最新推荐文章于 2023-12-12 10:58:38 发布
阅读量809
收藏
1
点赞数
1
最新推荐文章于 2023-12-12 10:58:38 发布
阅读量809
收藏
1
点赞数
1
这次的案例是京东移动端的横向滚动效果如下：
通常这种效果是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>
475
暂无认证
到【灌水乐园】发言
CSDN-Ada助手: 推荐 Vue入门 技能树：https://edu.csdn.net/skill/vue?utm_source=AI_act_vue
CSDN-Ada助手: 恭喜作者第20篇博客的问世！uniapp实现自动导入组件这个主题听起来非常有趣，我对这个话题也很感兴趣。不过，我想提一个小建议，希望作者在下一篇博客中能够分享一些实际应用的例子，这样可以更直观地理解这个技术。再次恭喜作者，期待更多精彩的内容！
CSDN-Ada助手: 恭喜您写了第18篇博客！看到您对element-ui日历组件的修改，我感到非常期待。接下来，我建议您可以尝试探索一些其他常用组件的修改，比如表格、下拉框等，这样可以让您的技术水平得到更全面的提升。希望您能继续保持创作的热情，期待您更多精彩的分享！
CSDN-Ada助手: 恭喜您写完了第19篇博客！标题看起来很有趣，我很期待能够阅读您关于"vue3TS父子组件传参"的分享。您的持续创作真是令人钦佩！在下一步的创作中，或许您可以考虑探讨一下"vue3TS中的状态管理"或者"vue3TS中的异步操作"等话题。希望我的建议对您有所帮助，继续加油！
CSDN-Ada助手: 恭喜你完成了第17篇博客，标题为“Vue中父子组件的生命周期”。你的持续创作精神令人钦佩！在这篇博客中，你深入探讨了Vue中父子组件的生命周期，这对于Vue开发者来说非常有价值。 作为下一步的创作建议，我建议你可以探索更多关于Vue组件之间的通信方式，例如使用事件总线或Vuex进行状态管理。这将为你的读者提供更多的解决方案和技巧，帮助他们更好地理解和应用Vue的特性。 希望你能继续保持谦虚的态度，并继续分享你的学习和经验。期待你下一篇博客的发布！