1. 交互性
  2. scroll-snap-stop

交互性

scroll-snap-stop

用于控制是否可以跳过可能的吸附位置的实用工具。

样式
snap-normal
scroll-snap-stop: normal;
snap-always
scroll-snap-stop: always;

示例

强制吸附位置停止

snap-always 实用工具与 snap-mandatory 实用工具一起使用,以强制吸附容器始终在元素上停止,然后用户才能继续滚动到下一个项目

在图像网格中滚动以查看预期行为

吸附点
<div class="snap-x snap-mandatory ...">  <div class="snap-center snap-always ...">    <img src="/img/vacation-01.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-02.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-03.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-04.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-05.jpg" />  </div>  <div class="snap-center snap-always ...">    <img src="/img/vacation-06.jpg" />  </div></div>

跳过吸附位置停止

使用 snap-normal 实用工具,允许吸附容器跳过可能的滚动吸附位置

在图像网格中滚动以查看预期行为

吸附点
<div class="snap-x ...">  <div class="snap-center snap-normal ...">    <img src="/img/vacation-01.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-02.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-03.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-04.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-05.jpg" />  </div>  <div class="snap-center snap-normal ...">    <img src="/img/vacation-06.jpg" />  </div></div>

响应式设计

前缀a scroll-snap-stop 实用工具 带有像 md: 这样的断点变体,仅在以下情况下应用实用工具中等 屏幕尺寸及以上

<div class="snap-always md:snap-normal ...">  <!-- ... --></div>

变体文档中了解有关使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策