纯css实现左右滑动(-webkit-box使用)

最新推荐文章于 2025-02-25 10:35:59 发布

艾欢欢

最新推荐文章于 2025-02-25 10:35:59 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：左右滑动移动端

本文链接：https://blog.youkuaiyun.com/AiHuanhuan110/article/details/89407110

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何仅使用CSS技术，在移动端实现元素的左右滑动效果，重点讲解了-webkit-box布局的运用，帮助开发者创建流畅的触摸滑动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>纯css实现左右滑动</title>
	<style type="text/css">
	ul,
	li {
		list-style: none;
	}

	.slide-box {
		margin-top: 50px;
		display: -webkit-box;
		overflow-x: auto;
		/*适应苹果*/
		-webkit-overflow-scrolling: touch;
	}

	.slide-item {
		width: 300px;
		height: 300px;
		border: 1px solid #ccc;
		margin-right: 30px;
		background: pink;
	}

	/*隐藏掉滚动条*/
	.slide-box::-webkit-scrollbar {
		display: none;
	}
	</style>
</head>

<body>
	<ul class="slide-box">
		<li class="slide-item">1</li>
		<li class="slide-item">2</li>
		<li class="slide-item">3</li>
		<li class="slide-item">4</li>
		<li class="slide-item">5</li>
	</ul>
	<p>测试文字，左右滚动时，这里不会动</p>
</body>

</html>