css3自动吸附scroll-snap
CSS3的scroll-snap特性允许开发者指定滚动容器中的滚动 snapping 行为，使得滚动更加平滑和可预测。
要使用scroll-snap，你需要在滚动容器上设置scroll-snap-type和scroll-padding属性。
以下是一个简单的例子，演示了如何使用scroll-snap使得一个滚动容器中的子元素在滚动时自动吸附到容器的边缘：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.scroll-container {
display: flex;
overflow: auto;
scroll-snap-type: mandatory; /* 启用滚动吸附 */
scroll-padding: 20px; /* 在滚动时添加填充 */
height: 200px; /* 滚动容器的高度 */
}
.scroll-container .item {
scroll-snap-align: start; /* 每个子元素在滚动时吸附到容器的开始边缘 */
height: 100%; /* 子元素的高度 */
width: 100%; /* 子元素的宽度 */
}
/* 样式调整，仅为美观而已 */
.scroll-container .item {
background: #f0f0f0;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<!-- 更多的.item元素 -->
</div>
</body>
</html>在这个例子中，.scroll-container是一个有overflow: auto;的滚动容器，其scroll-snap-type属性被设置为mandatory以启用滚动吸附。每个.item子元素通过scroll-snap-align属性指定它们在滚动时应该吸附到容器的哪个边缘。scroll-padding属性则在滚动时为每个子元素添加额外的填充。
评论已关闭