CSS 滚动捕捉点在 iOS 9.1 safari 中不起作用

Question

我刚刚将我的 ipad mini 更新为 iOS 9.1 并根据 Can I use I should be able to use css snappoints on my device in safari. There are snap-point demo's on the web, but I've written one of my own (why not :) DEMO。在该演示中，您可以水平滚动。

HTML:

<ol>
        <li class="a"></il>
        <li class="b"></il>
        ...
</ol>

样式：

ol {
    list-style-type: none;

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    scroll-snap-type: mandatory;
    scroll-snap-points-x: repeat(100%);
    scroll-behavior: smooth;
}

无论如何，我的演示在我的笔记本电脑上可以在 FF 和 Safari 中运行，但在我的 iPad 上却不行。所以问题是，是 Can I Use 错了还是我做错了什么？

Answer 1

我在一个项目中遇到了同样的问题，该项目也不会按照您在 iPad 上的建议进行操作。但是，由于截止日期，我最终使用了这个超轻的小 jquery 插件，名为：

Snap-point

在此处试用演示：http://robspangler.com/git/jquery-snappoint/demo/demo.html

Answer 2

我可以通过添加 -webkit-overflow-scrolling: touch; 使其工作看到这个更新 fiddle http://jsfiddle.net/hpjtqewn/2/

该按钮不起作用，但当我使用手指滚动时，它会捕捉到正确的捕捉点，这在我桌面上的 safari 浏览器中也是如此，当我使用触摸板滚动时它会起作用。普通鼠标不起作用，单击按钮也不起作用，但这可能与您通过 jquery.

使用 .scrollTo 的方式有关

Answer 3

您可以为您的 ol 添加父 div 并使用 -webkit-overflow-scrolling:touch。它修复了 iOS.

上的滚动问题

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
    <ol>
      <li class="a"></il>
      <li class="b"></il>
      ...
    </ol>
</div>

Answer 4

我发现 irnmn 的回答很有帮助，但在进入项目后它又停止工作了。经过几个小时的调查，我发现添加

overflow: hidden;

在桌面和移动设备上，子元素会杀死 safari 上的快速滚动。

Answer 5

在撰写本文时，要在 Safari 中进行全屏滚动捕捉，滚动捕捉类型必须带有 body 标签：

body { 
  scroll-snap-type: y mandatory;
}

而 Chrome 和 Firefox 要求它带有 html 标签：

html {
  scroll-snap-type: y mandatory;
}

它有点乱，但我不得不将它们都放在我的 css 文件中以实现跨平台兼容性。

CSS 滚动捕捉点在 iOS 9.1 safari 中不起作用

CSS Scroll snap point not working in iOS 9.1 safari

css

safari

browser-support

scroll-snap-points