2

这是一个简单的滚动快照演示：

.scroll {
  border: 2px solid black;
  width: 150px;
  height: 150px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  display: flex;
}

.item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: 2px solid red;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="scroll">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

我期望发生的事情

在桌面 Safari 中用鼠标滚动滚动条应该捕捉到一个项目。

发生什么了

滚动捕捉在 Safari 中无效，但在 Firefox 和 Chrome 中有效。但如果我使用触控板滚动，它确实可以在 Safari 中使用。

这似乎是一个如此简单的问题，我觉得在 Stackoverflow 上提出这样一个微不足道的问题很愚蠢，但过去 30 分钟我一直在谷歌搜索，我似乎找不到其他人有同样的问题或一些文档这解释了这种行为。甚至 WebKit 的滚动快照演示页面也没有表明它只能在 iOS 或触控板上工作；他们为什么不提这个？我错过了什么吗？

4

1 回答 1

0

这是一个已经修复的错误：https ://bugs.webkit.org/show_bug.cgi?id=146696

于 2021-11-19T18:57:45.017 回答