CSS的scroll-snap-type属性指定滚动容器如何捕捉到捕捉位置。
要使用scroll-snap-type属性，您需要在滚动容器上设置它。您还需要在要对齐到位的元素上设置 scroll-snap-align 属性。
可能值
none: 滚动容器不会捕捉到任何位置。
x: 该值为用于水平滚动。
y: 该值用于垂直滚动。
block: 这使得滚动容器停止在块轴上最近的捕捉点处。
inline: 这使得滚动容器停止在内联轴上最近的捕捉点处。
both: 它指定滚动应在滚动容器内水平和垂直对齐。
mandatory: 滚动容器应对齐到最近的对齐点，强制用户滚动到特定位置。
proximity: 滚动容器应根据接近度捕捉到最近的捕捉点。
适用范围
所有 HTML 元素。
DOM 语法
object.style.scrollSnapType = "none|x|y|block|inline|both|mandatory|proximity"; CSS scroll-snap-type: none
以下示例演示了scroll-snap-type: none属性的使用 -
<html>
<head>
<style>
.scroll-container {
display: flex;
width: 350px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: none;
}
.scrolling-section1,
.scrolling-section2,
.scrolling-section3 {
flex: 0 0 auto;
width: 320px;
height: 200px;
scroll-snap-align: center;
}
.scrolling-section1 {
background-color: rgb(220, 235, 153);
}
.scrolling-section2 {
background-color: rgb(230, 173, 218);
}
.scrolling-section3 {
background-color: rgb(176, 229, 238);
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="scrolling-section1">scroll-snap-type: none</div>
<div class="scrolling-section2">scroll-snap-type: none</div>
<div class="scrolling-section3">scroll-snap-type: none</div>
<div class="scrolling-section1">scroll-snap-type: none</div>
</div>
</body>
</html> CSS scroll-snap-type: X和Y mandatory
以下示例演示了如何使用使用scroll-snap-type:x mandatory和scroll-snap-type:y mandatory将使滚动容器停止在X轴和Y轴上最近的捕捉点，即使您快速滚动:
<html>
<head>
<style>
.scroll-container1 {
display: flex;
width: 350px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
margin-bottom: 20px;
}
.scroll-container2 {
width: 350px;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
white-space: nowrap;
scroll-snap-type: y mandatory;
}
.scrolling-section1,
.scrolling-section2,
.scrolling-section3 {
flex: 0 0 auto;
width: 320px;
height: 200px;
scroll-snap-align: center;
}
.scrolling-section1 {
background-color: rgb(220, 235, 153);
}
.scrolling-section2 {
background-color: rgb(230, 173, 218);
}
.scrolling-section3 {
background-color: rgb(176, 229, 238);
}
</style>
</head>
<body>
<div class="scroll-container1">
<div class="scrolling-section1">scroll-snap-type: x mandatory</div>
<div class="scrolling-section2">scroll-snap-type: x mandatory</div>
<div class="scrolling-section3">scroll-snap-type: x mandatory</div>
<div class="scrolling-section1">scroll-snap-type: x mandatory</div>
</div>
<div class="scroll-container2">
<div class="scrolling-section1">scroll-snap-type: y mandatory</div>
<div class="scrolling-section2">scroll-snap-type: y mandatory</div>
<div class="scrolling-section3">scroll-snap-type: y mandatory</div>
<div class="scrolling-section1">scroll-snap-type: y mandatory</div>
</div>
</body>
</html> CSS scroll-snap-type: X 和 Y proximity
以下示例演示如何使用scroll-snap-type:x proximity和scroll-snap-type:y proximity属性创建滚动容器，当您水平和垂直滚动时，各部分会卡入到位 -
<html>
<head>
<style>
.scroll-container1 {
display: flex;
width: 350px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x proximity;
margin-bottom: 20px;
}
.scroll-container2 {
width: 350px;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
white-space: nowrap;
scroll-snap-type: y scroll-snap-type;
}
.scrolling-section1,
.scrolling-section2,
.scrolling-section3 {
flex: 0 0 auto;
width: 300px;
height: 200px;
scroll-snap-align: center;
}
.scrolling-section1 {
background-color: rgb(220, 235, 153);
}
.scrolling-section2 {
background-color: rgb(230, 173, 218);
}
.scrolling-section3 {
background-color: rgb(176, 229, 238);
}
</style>
</head>
<body>
<div class="scroll-container1">
<div class="scrolling-section1">scroll-snap-type: x proximity</div>
<div class="scrolling-section2">scroll-snap-type: x proximity</div>
<div class="scrolling-section3">scroll-snap-type: x proximity</div>
<div class="scrolling-section1">scroll-snap-type: x proximity</div>
</div>
<div class="scroll-container2">
<div class="scrolling-section1">scroll-snap-type: y proximity</div>
<div class="scrolling-section2">scroll-snap-type: y proximity</div>
<div class="scrolling-section3">scroll-snap-type: y proximity</div>
<div class="scrolling-section1">scroll-snap-type: y proximity</div>
</div>
</body>
</html> CSS scroll-snap-type: 两个值
以下示例演示了滚动捕捉类型:这两个属性都会将滚动容器停止在水平和垂直方向上最近的捕捉点处 -
<html>
<head>
<style>
.scroll-container {
display: flex;
width: 350px;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap;
scroll-snap-type: both;
}
.scrolling-section1,
.scrolling-section2,
.scrolling-section3 {
flex: 0 0 auto;
width: 320px;
height: 200px;
scroll-snap-align: center;
}
.scrolling-section1 {
background-color: rgb(220, 235, 153);
}
.scrolling-section2 {
background-color: rgb(230, 173, 218);
}
.scrolling-section3 {
background-color: rgb(176, 229, 238);
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="scrolling-section1">scroll-snap-type: both</div>
<div class="scrolling-section2">scroll-snap-type: both</div>
<div class="scrolling-section3">scroll-snap-type: both</div>
<div class="scrolling-section1">scroll-snap-type: both</div>
</div>
</body>
</html> CSS scroll-snap-type: RTL 和 LTR 方向
以下示例演示如何使用scroll-snap-type 属性用于创建在从右到左 (RTL) 和从左到右 (LTR) 两个方向上具有捕捉点的滚动容器 -
<html>
<head>
<style>
.scroll-container1 {
display: flex;
width: 350px;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
margin-bottom: 20px;
}
.scroll-container2 {
width: 350px;
height: 150px;
overflow-y: scroll;
overflow-x: hidden;
white-space: nowrap;
scroll-snap-type: y mandatory;
margin-bottom: 20px;
}
.scroll-container3 {
display: flex;
width: 350px;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x proximity;
margin-bottom: 20px;
}
.scroll-container4 {
width: 350px;
height: 150px;
overflow-y: scroll;
overflow-x: hidden;
white-space: nowrap;
scroll-snap-type: y proximity;
margin-bottom: 20px;
}
.scrolling-section1,
.scrolling-section2,
.scrolling-section3 {
flex: 0 0 auto;
width: 320px;
height: 150px;
scroll-snap-align: center;
}
.scrolling-section1 {
background-color: rgb(220, 235, 153);
}
.scrolling-section2 {
background-color: rgb(230, 173, 218);
}
.scrolling-section3 {
background-color: rgb(176, 229, 238);
}
</style>
</head>
<body>
<div class="scroll-container1" dir="ltr">
<div class="scrolling-section1">scroll-snap-type: x mandatory with ltr</div>
<div class="scrolling-section2">scroll-snap-type: x mandatory with ltr</div>
<div class="scrolling-section3">scroll-snap-type: x mandatory with ltr</div>
<div class="scrolling-section1">scroll-snap-type: x mandatory with ltr</div>
</div>
<div class="scroll-container2" dir="ltr">
<div class="scrolling-section1">scroll-snap-type: y mandatory with ltr</div>
<div class="scrolling-section2">scroll-snap-type: y mandatory with ltr</div>
<div class="scrolling-section3">scroll-snap-type: y mandatory with ltr</div>
<div class="scrolling-section1">scroll-snap-type: y mandatory with ltr</div>
</div>
<div class="scroll-container3" dir="ltr">
<div class="scrolling-section1">scroll-snap-type: x proximity with ltr</div>
<div class="scrolling-section2">scroll-snap-type: x proximity with ltr</div>
<div class="scrolling-section3">scroll-snap-type: x proximity with ltr</div>
<div class="scrolling-section1">scroll-snap-type: x proximity with ltr</div>
</div>
<div class="scroll-container4" dir="ltr">
<div class="scrolling-section1">scroll-snap-type: y proximity with ltr</div>
<div class="scrolling-section2">scroll-snap-type: y proximity with ltr</div>
<div class="scrolling-section3">scroll-snap-type: y proximity with ltr</div>
<div class="scrolling-section1">scroll-snap-type: y proximity with ltr</div>
</div>
<div class="scroll-container1" dir="rtl">
<div class="scrolling-section1">scroll-snap-type: x mandatory with rtl</div>
<div class="scrolling-section2">scroll-snap-type: x mandatory with rtl</div>
<div class="scrolling-section3">scroll-snap-type: x mandatory with rtl</div>
<div class="scrolling-section1">scroll-snap-type: x mandatory with rtl</div>
</div>
<div class="scroll-container2" dir="rtl">
<div class="scrolling-section1">scroll-snap-type: y mandatory with rtl</div>
<div class="scrolling-section2">scroll-snap-type: y mandatory with rtl</div>
<div class="scrolling-section3">scroll-snap-type: y mandatory with rtl</div>
<div class="scrolling-section1">scroll-snap-type: y mandatory with rtl</div>
</div>
<div class="scroll-container3" dir="rtl">
<div class="scrolling-section1">scroll-snap-type: x proximity with rtl</div>
<div class="scrolling-section2">scroll-snap-type: x proximity with rtl</div>
<div class="scrolling-section3">scroll-snap-type: x proximity with rtl</div>
<div class="scrolling-section1">scroll-snap-type: x proximity with rtl</div>
</div>
<div class="scroll-container4" dir="rtl">
<div class="scrolling-section1">scroll-snap-type: y proximity with rtl</div>
<div class="scrolling-section2">scroll-snap-type: y proximity with rtl</div>
<div class="scrolling-section3">scroll-snap-type: y proximity with rtl</div>
<div class="scrolling-section1">scroll-snap-type: y proximity with rtl</div>
</div>
</body>
</html>