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

Posted 2023-03-05

【中文标题】CSS 滚动捕捉点在 iOS 9.1 Safari 中不起作用

【英文标题】：CSS Scroll snap point not working in iOS 9.1 safari

【发布时间】：2016-01-24 21:19:23

【问题描述】：

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

【参考方案1】：

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

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

【参考方案2】：

您可以为您的 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>

【参考方案3】：

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

overflow: hidden;

到子元素会在 Safari（桌面和移动设备）上终止快速滚动。

【参考方案4】：

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

body  
  scroll-snap-type: y mandatory;

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

html 
  scroll-snap-type: y mandatory;

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

【参考方案5】：

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

Snap-point

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

【讨论】：

我已经在台式机和 iPad 上尝试过演示，但如果我滚动，则没有太多捕捉。如果我滚动，我只会体验到正常的滚动行为。

我在 ipad 上试了一下，如果我滚动到它说要滚动到的区域，它确实会把我吸引到盒子顶部的断点。

嗯...你们使用的是哪个版本的 jquery？我正在使用谷歌提供的（v 1.8.2）