စီစ်စက်ဆိုင်ရာ scroll-snap-align သုံးသပ်

ဒီ အက္ခရာ နှင့် အသုံးပြုခြင်း

scroll-snap-align သတ်မှတ် ထားသော အရာသည် လှည်ပြား ရပ်တန့် သည့် အချိန်မှာ အရာသည် စိတ်ဝှို့ စောင်း နေသော စက်တင် နေရာသို့ သိမ်းကြောင်း

လှည်ပြား သိမ်းကြောင်း ပြုလုပ် ရန် ရှေ့ပေါ် အရာများ တွင် ထိန်းချိန်း သတ်မှတ် ပါကြောင်း scroll-snap-align ပြင်ပ အရာကို သတ်မှတ် ပြီး ပိုင်းအုပ် အရာတွင် ထိန်းချိန်း scroll-snap-type 属性。

实例

例子 1

当用户停止滚动时，使最近的元素吸附到中心位置：

div {
  scroll-snap-align: center;
}

亲自试一试

例子 2：图片库

scroll-snap-align 属性非常适合用于滚动浏览图片库。在这里，滚动方向是水平的，吸附对齐方式是居中。当用户松开滚动条时，最近的图片将吸附到可滚动区域的中间位置。尝试点击一张图片，然后使用左右箭头键滚动浏览它们：

#container > img {
  scroll-snap-align: none center;
}
ပြည်ထောင်စု ဆန်းပြ ဝေလံ တီလီပေ ဟန်ဂျု

亲自试一试

alley bridge in jungle mountains man with camera Cinque Terre

例子 3：在块方向上垂直对齐吸附位置

当垂直滚动时，scroll-snap-align 属性也可以在块方向上设置为元素的起始位置：

#container > div {
  scroll-snap-align: start none;
}

亲自试一试

CSS 语法

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

属性值

值 描述
none 无滚动吸附效果。默认值。
start 在 x 轴和 y 轴上，元素开始处进行滚动吸附。
end 在 x 轴和 y 轴上，元素结束处进行滚动吸附。
center 在 x 轴和 y 轴上，元素中心处进行滚动吸附。
block inline 双值语法。第一个值指定块级方向上的吸附方式，第二个值指定行内方向上的吸附方式。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： none
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.scrollSnapAlign="start"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

ပါဝင်သော စာမျက်နှာ

ညွှန်းပြချက်စီစ်စက်ဆိုင်ရာ scroll-snap-type သုံးသပ်