10

我刚刚将我的 ipad mini 更新到 iOS 9.1，根据Can I use我应该能够在我的设备上的 safari 中使用 css snappoints。网上有快照点演示，但我自己写了一个（为什么不 :) 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 上却不行。所以问题是，我可以使用错误还是我做错了什么？

4

5 回答 5

13

-webkit-overflow-scrolling: touch; 我能够通过添加看到这个更新的小提琴http://jsfiddle.net/hpjtqewn/2/使它工作

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

于 2015-11-20T01:03:29.243 回答
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>
于 2015-11-20T14:15:38.803 回答
3

我发现irnmn 的回答很有帮助，但深入到项目中它再次停止工作。经过几个小时的调查，我发现添加

overflow: hidden;

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

于 2019-09-05T21:39:46.923 回答
3

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

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

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

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

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

于 2020-04-25T12:34:36.003 回答
2

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

捕捉点

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

于 2015-11-18T15:35:34.307 回答