ຄວາມລະບຸ scroll-snap-align
- ໜ້າໃນຫນຶ່ງ scroll-padding-top
- ໜ້າໃນຫນຶ່ງ scroll-snap-stop
定义和用法
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; }





例子 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
- ໜ້າໃນຫນຶ່ງ scroll-padding-top
- ໜ້າໃນຫນຶ່ງ scroll-snap-stop