ຄວາມລະບຸ 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