CSS 捕捉点是基于 javascript 解决方案的一个很好的替代方案。我意识到这不是最终规范，但 webkit 已经采用了 css 捕捉点。
但是，如果您启用支持移动网络应用程序的元，则它会失败
一个例子:http://jsfiddle.net/hpjtqewn/2/
如果您在 ipad 上的 safari 中打开它，效果会很好。忽略按钮，只需滚动即可。现在将此 jsfiddle 固定到您的主屏幕并使用新创建的快捷方式打开它。为 jsfiddle 加载了支持移动网络应用程序并破坏了快照点功能:您现在可以平滑滚动而不是快照。
使用 polyfill 作为回退并不能解决问题。在不回退到完整的 javascript 解决方案的情况下有什么建议吗？
<html>
<style type="text/css">
* {
box-sizing: border-box;
}
ol {
list-style-type: none;
padding: 0px;
margin: 0px;
height: 100px;
width: 500px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-webkit-scroll-snap-points-x: repeat(100%);
-ms-scroll-snap-points-x: repeat(100%);
scroll-snap-points-x: repeat(100%);
//scroll-snap-destination: 50% 50%;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
li {
display: inline-block;
border: 2px solid #000;
height: 100px;
width: 100%;
}
.a {
background-color: green;
}
.b {
background-color: yellow;
}
.c {
background-color: gray;
}
</style>
<body>
<ol>
<li class="a"></il>
<li class="b"></il>
<li class="c"></il>
<li class="d"></il>
<li class="e"></il>
<li class="f"></il>
<li class="g"></il>
<li class="h"></il>
</ol>
<button id="scroll-to-c">Scroll to C</button>
</body>
</html>
最佳答案
iOS 11 要求滚动对齐工作的规范草案有一个新的补充。添加 scroll-snap-align: start; 到你的滚动元素。 [来源:https://www.filamentgroup.com/lab/keep-snap-points-snapping.html]
关于ios - Css scroll snap 不适用于支持苹果移动网络的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46122306/