Safari/Webkit CSS滚动捕捉错误？

我似乎无法使scroll snap在Safari（桌面或iOS）上正常工作

错误（？）发生在项目的内容高于视口时，在这种情况下，Safari snap会立即滚动到下一个项目，使得无法读取具有长文本的项目的内容。Chrome、Firefox或Opera上的情况并非如此，它们可以滚动任何长的捕捉部分，而下一个项目的开始捕捉只会发生在该长项目的底部（使其能够被读取）

下面是一个演示：

使用的相关代码：

ul {
    max-height: 100vh;
    overflow: scroll;
    scroll-snap-type: y mandatory;
}
li {
    scroll-snap-align: start;
}

---

任何人都能绕过这个问题，让Safari表现得像Chrome/Firefox/Opera？

你试过使用

-webkit吗？

Safari的一些

-webkit滚动快照
示例：

也许：

div {
    max-height: 100vh;
    overflow: scroll;
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
}

li {
    -webkit-scroll-snap-align: start;
    scroll-snap-align: start;
}

实际上，safari做得很正确，而另一个只是做了一种接近

因此，即使我理解你不喜欢接近，你期望的
强制性的方式也没有意义，让我解释一下

mandatory
试图在设置
滚动捕捉对齐：开始时，将视图始终固定到
子项的
开始
这意味着儿童身高必须小于代码>最大身高：100vh以产生正确的效果

因为如果您不这样做，那么用户将永远无法阅读
li
的底部，尝试使用您的演示，您将看到，当它进入屏幕时，它会直接进入下一个
li

因此，根据您的愿望，我建议您设置：


您可以设置
接近度
您可以设置
li{max height:100vh；overflow-y:auto；}
并将内容设置为
div
。但对于用户来说真的很难管理
您可以按照下面的演示使用jQuery旧方法

看看：

使用纯jQuery进行演示：


var items=$（“.item”）；
var动画=假；
$（窗口）。滚动（函数（）{
clearTimeout（$.data（这是“滚动计时器”）；
如果（！设置动画）{
$.data（这是'scrollTimer'，setTimeout（函数（）{
var计数=0；
项目。每个（功能（键、值）{
/**调整200值，使项目顶部前后的滚动大于200px**/
/**您甚至可以通过获取视口高度并对其应用百分比，使该值根据屏幕而动态变化**/
如果（（$（窗口）.scrollTop（）>（$（值）.offset（）.top-200）
&&（$（窗口）.scrollTop（）-$（值）.offset（）.top）<200）
||（$（窗口）.scrollTop（）>（$（值）.offset（）.top+200）
&&（$（窗口）.scrollTop（）-$（值）.offset（）.top）<200））{
动画=真；
$（'html，body'）.animate（{scrollTop:$（value.offset（）.top}，250）；
setTimeout（函数（）{animating=false；}，300）；
返回false；
}
});
}, 200));
}
});
li{
填充底部：40px；
字号：2.2rem；
文本对齐：居中；
证明内容：中心；
}


Lorem，ipsum dolor.
Lorem，ipsum dolor.
Lorem，ipsum dolor.
Lorem，ipsum dolor.
Lorem，ipsum dolor.
Lorem，ipsum dolor.
Lorem，ipsum dolor，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
洛伦，益普生多洛。
，伊普苏姆多洛。
洛伦，伊普苏姆多洛。
洛伦，伊普苏姆多洛。

fugit cenas bla-bla
fugit cenas bla-bla
fugit cenas bla-bla
fugit cenas bla-bla
fugit cenas bla
fugit cenas bla
fugit cenas bla-bla
fugit cenas bla bla bla/>fugit cenas bla-bla
fugit cenas bla-bla
fugit cenas bla-bla
fugit cenas bla-bla
fugit cenas bla
fugit cenas bla
fugit cenas bla-bla
fugit cenas bla bla bla/>fugit cenas bla bla
fugit cenas bla bla
fugit cenas bla bla
fugit cenas bla bla
fugit cenas bla bla
fugit cenas bla
fugit cenas bla bla