动画效果
效果如下：
<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="s3k8Hysa-1722416279176" src="https://live.csdn.net/v/embed/414055"></iframe>当卡片进行左右滚动时，每次都恰好滑动出来下一个卡片，将下一个卡片完整的展现在容器中间。
核心代码
1.设置容器和卡片的样式
.wrapper {
display: flex;
gap: 20px;
width: 300px;
margin: 100px auto;
overflow-x: scroll;
}
.card {
box-sizing: border-box;
padding: 20px 30px;
flex-shrink: 0;
width: 300px;
background-color: white;
border-radius: 14px;
text-align: center;
}
2.为容器设置 scroll-snap-type属性
.wrapper {
scroll-snap-type: x mandatory;
}
x是指沿着X轴滚动，mandatory是若滚动容器当前未在滚动，则其可见视口必须吸附至吸附位置。。
3.为卡片设置scroll-snap-align属性
.card {
scroll-snap-align: center;
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #e8e7ee;
}
.wrapper {
display: flex;
gap: 20px;
width: 300px;
margin: 100px auto;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.card {
scroll-snap-align: center;
box-sizing: border-box;
padding: 20px 30px;
flex-shrink: 0;
width: 300px;
background-color: white;
border-radius: 14px;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="card">
<h2>Card 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
<div class="card">
<h2>Card 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
<div class="card">
<h2>Card 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
<div class="card">
<h2>Card 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
<div class="card">
<h2>Card 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
<div class="card">
<h2>Card 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
<div class="card">
<h2>Card 7</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
<div class="card">
<h2>Card 8</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
<div class="card">
<h2>Card 9</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
<div class="card">
<h2>Card 10</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
aliquid reprehenderit.</p>
</div>
</div>
</body>
</html>