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

Posted 2023-03-04

【中文标题】使用鼠标的 CSS 滚动捕捉在 Safari 中不起作用，但在 Firefox 和 Chrome 中有效

【英文标题】：CSS scroll snap with mouse does not work in Safari but works in Firefox and Chrome

【发布时间】：2021-03-12 22:01:44

【问题描述】：

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

.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 中使用。

---

这似乎是一个如此简单的问题，我觉得在 *** 上提出这样一个微不足道的问题很愚蠢，但过去 30 分钟我一直在谷歌上搜索，似乎找不到其他人有同样的问题或一些解释此行为的文档。甚至 WebKit 的滚动捕捉 demo page 也并不表示它应该只适用于 ios 或触控板；他们为什么不提这个？我错过了什么吗？

【问题讨论】：

有同样的问题，你有没有得到它的工作？

【参考方案1】：

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