问题标签 [scroll-snap-points]

我刚刚将我的 ipad mini 更新到 iOS 9.1，根据Can I use我应该能够在我的设备上的 safari 中使用 css snappoints。网上有快照点演示，但我自己写了一个（为什么不 :) DEMO。在该演示中，您可以水平滚动。

HTML：

款式：

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

有没有一种简单的方法来检查浏览器是否支持 CSS Snap Points。我已经为水平画廊设置了故障保险，但如果浏览器已经原生支持快照点，我想关闭所有 Javascript。

此外，是否有任何体面的 polyfill 可以更好地完成我在这里构建的工作。

我正在尝试实现在滚动时捕捉到点的滚动视图。

我在这里看到的所有帖子都是关于“在”用户结束拖动滚动后捕捉到一个点。我想让它在拖动过程中捕捉。

到目前为止，我有这个来阻止拖动后的惯性，它工作正常：

我试过了，但没有按预期工作：

scrollViewDidScroll：

我有一个关于CSS 中的捕捉点的问题（资源、浏览器支持）。我想在整个身体中完全正常滚动，直到后面的“隐藏”部分。当用户滚动到倒数第二部分的底部时，视口应该与该部分的底部对齐（与最后一部分的顶部相同）。当用户尝试滚动浏览这一快照时，它应该只能通过克服特定阈值来实现。

我已经可视化了我的问题以便更好地理解，我非常希望通过当前的捕捉点规范可以做到这一点。

并提前感谢您的帮助。

我是 jQuerys 的新手，并且一直在 GitHub 的帮助下自学。我写了一个非常简单的滚动捕捉代码，但是，实际的捕捉部分不起作用。我将在下面粘贴我的代码：

请帮助我任何提示。我是一个完整的初学者，所以随时提出任何批评。再次感谢！

对不起，我的英语不好。英语不是我的母语，我有阅读障碍。

解释我的问题

我一直在尝试创建一个自动从锚点滚动到锚点的菜单。 这是一个简短的 gif，显示了应用程序的工作原理。 但是应用程序必须对用户滚动做出反应，而不是按下那些导航按钮。

此菜单由 ngFor 生成，并且可以计算每个锚点的位置。每次按下按钮时，这些按钮都会通过一个名为“平滑滚动 polyfill”的 API 工作，它们会从我用来确定应用程序位置的 Pos 变量中删除或添加，它使用 API 中的 window.scroll 函数，并且效果很好。

但是当我尝试让它与滚动事件一起工作时，会出现一些挑战。

1. 首先，滚动动画会触发滚动事件，滚动后，应用程序就会变得疯狂。

2. 当您滚动时，您不只是滚动一步。每一步都算作一个姿势。我不知道如何让它工作，所以如果我向下滚动它会先完成滚动动画，然后它会再次监听新的滚动事件。

我的代码

按钮代码

这是我用来使应用程序处理滚动事件的以下代码。我不知道放在这里以使应用程序正常工作。

最后是 HTML。在 section 标签末尾的第二行是放置的滚动检查部分 (window:scroll)="...

我希望我提供了足够的信息。提前致谢。;)

编辑：

我已经使它与 RXJS observable 一起工作。准确地说是一个 fromEvent Observable。这适用于 google chrome、edge 和 Opera。但是，Internet Explorer 和 Firefox 不想工作。然后在所有浏览器中弹出以下内容。

火狐：

和谷歌浏览器（编辑仍然有效）：

我认为是 polyfill.js 和 scrollsnap-polyfill.js 没有从 ts 编译为 js，但我可能错了。

先谢谢了。

我正在使用https://github.com/electerious/scrollSnap来捕捉我网站中的部分，但我不明白，因为当我使用鼠标滚轮时，马赛克网格和下面的部分之间存在阻力。

如果我使用滚动条，我可以在马赛克下的部分之间捕捉。

我注意到 iOS 10 中带有 CSS scroll-snap属性的一个奇怪错误。

这是我的CSS：

如果我以编程方式滚动到一个捕捉点，然后更改滚动捕捉容器内的内容，则导航会捕捉回第一个捕捉点。

它似乎与我触发滚动的方式无关。所有这些滚动方法都会产生相同的结果：

1. 手动滚动时不会发生该错误（请参阅下面的@maxime 评论）。
2. 它从 iOS 10.3.2 版本开始存在。
3. 不知道 iOS 11 有没有修复。

我花了几天时间试图解决这个问题，但到目前为止没有成功。

这是我的导航的精简示例：

Codepen Demo

许多滚动捕捉点属性正在从 Web 标准中删除。

例如https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-points-x

滚动捕捉点模块是否被其他任何允许通过 css 滚动捕捉的东西替换？

我有一个单页移动引导站点，当滚动时，当点击导航菜单中的链接时，固定导航栏会覆盖部分标题。我发现这是由 CSS 滚动捕捉点引起的。我试图为所有部分设置scroll-snap-type: none;类.section，但它仍然产生错误。如何正确禁用整个页面的 CSS 滚动捕捉点？