使用 scroll-snap-type 和 -align 没有滚动捕捉 / 简单示例无法正常工作 Chrome/Firefox /

Posted 2023-03-06

【中文标题】使用 scroll-snap-type 和 -align 没有滚动捕捉 / 简单示例无法正常工作 Chrome/Firefox /

【英文标题】：No scroll snap with scroll-snap-type and -align / Simple Example not working Chrome/Firefox /

【发布时间】：2019-07-23 21:06:42

【问题描述】：

使用 Chrome / Firefox，我为几张图片创建了一个容器 (.container)（列出带有类 img 的项目）。 我在容器上添加了滚动捕捉类型。 我在 img 类的项目上添加了滚动对齐对齐。

我在这里错过了什么？

html

<div class="container">
  <ul>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  </ul>
</div>

CSS

.img 
  margin: 10px 5px;
  scroll-snap-align: center;
  -webkit-overflow-scrolling: touch;


.container 
  display:  grid; 
  justify-content: center; 
  grid-gap: 10px;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;

【问题讨论】：

你试过这个例子吗？ - codepen.io/maxakohler/pen/JBjROd

是的，它有效，这让我感到困惑，因为我没有做任何不同的事情？

我建议你分叉笔并进行编辑以达到你想要的效果。

你错过了开头的<ul>标签

打开 ul-tag 也不起作用。

【参考方案1】：

事实证明，scroll-snap-type 要求您为容器定义一个高度。我不确定如何解释为什么需要它，但是，定义 height 确实解决了这个问题。

.img 
  margin: 10px 5px;
  scroll-snap-align: center;
  -webkit-overflow-scrolling: touch;


.container 
  display:  grid; 
  justify-content: center; 
  grid-gap: 10px;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;

【讨论】：

谢谢。在找到您的代码之前，我已经阅读了所有内容，但无法使其正常工作。

我认为定义高度的要求是为了防止容器通过垂直拉伸来简单地容纳其内容。如果容器足够高以容纳其所有子项，则无需滚动。没有滚动，没有捕捉。