DevShelf

Appearance

scroll-snap-type ​

描述 ​

scroll-snap-type CSS 属性设置在滚动容器上强制执行捕捉点（以防万一）的严格程度。

效果展示 ​

语法 ​

css
/* Keyword values */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

值 ​

  • none 当此滚动容器的视觉视口滚动时，它必须忽略捕捉点。
  • x 滚动容器仅捕捉到其水平轴上的捕捉位置。
  • y 滚动容器仅捕捉到其垂直轴上的捕捉位置。
  • block 滚动容器仅捕捉到其块轴上的捕捉位置。
  • inline 滚动容器仅捕捉到其内联轴上的捕捉位置。
  • both 滚动容器独立地捕捉到其两个轴上的捕捉位置（可能捕捉到每个轴上的不同元素）。
  • mandatory 如果当前未滚动，则此滚动容器的视觉视口将停留在捕捉点上。这意味着如果可能的话，当滚动操作完成时，它会捕捉到该点。如果添加、移动、删除内容或调整内容大小，将调整滚动偏移以保持停留在该捕捉点上。
  • proximity 如果考虑到用户代理的滚动参数当前未滚动，则此滚动容器的视觉视口可能会停留在捕捉点上。如果内容被添加、移动、删除或调整大小，则可以调整滚动偏移以保持停留在该捕捉点上。