CSS 使用鼠标滚动捕捉在 Safari 中不起作用，但在 Firefox 和 Chrome 中起作用

Question

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

.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 中使用鼠标滚动滚动条应该会捕捉到一个项目。

会发生什么

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

这似乎是一个如此简单的问题，我觉得在 Whosebug 上问这样一个微不足道的问题很愚蠢，但过去 30 分钟我一直在谷歌搜索，但我似乎找不到其他人相同的问题或解释此行为的一些文档。即使是 WebKit 的 scroll snap demo page 也没有表明它只能在 iOS 或触控板上工作；他们为什么不提这个？我错过了什么吗？

Answer 1

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

CSS 使用鼠标滚动捕捉在 Safari 中不起作用，但在 Firefox 和 Chrome 中起作用

CSS scroll snap with mouse does not work in Safari but works in Firefox and Chrome

html

css

safari

scroll-snap