问题标签 [scroll-snap]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 阻止用户一次滚动超过 1 个元素
问题
基本上我有一个有一些视频的移动网站。每个视频占用 100% 的宽度和 100% 的高度。我正在尝试制作滚动捕捉类型的提要，用户一次只能滚动一个视频，如果他们在滚动时到达页面上的某个点，它将捕捉到下一个视频。这有点像 tiktok 的视频提要或 instagram 卷轴作为一个想法。
我正在使用 scroll-snap 包，它让我达到了我想要实现的目标的一半。缓慢滚动时它会卡住，但是如果我在移动设备上，我可以非常快速地滚动并让滚动势头跳过视频。我正在努力做到这一点，以便用户一次只能滚动 1 个视频，无论他们滚动多么努力。
这是正在发生的事情：https ://streamable.com/f98slq 。如您所见，我一次可以滚动超过 1 个视频。
我试过的
我试图在滚动提要时获得滚动速度。如果它高于某个值，我会应用一种停止页面滚动 10 毫秒的样式。这并没有真正起作用，因为即使滚动速度不高，滚动动量也能够滚动页面。我不是很喜欢这个解决方案。
我不确定解决这个问题的最佳方法。对于任何反馈，我们都表示感谢。
这是我的代码：
css - 我可以在不使非对齐元素无法访问的情况下实现 CSS 滚动对齐吗？
我正在尝试通过 CSSscroll-snap-type和scroll-snap-align属性使用滚动捕捉，但无论我做什么，我最终都会使非捕捉元素无法访问。
例如，在下面的示例中。段落 ( <p>) 都可以访问，甚至可以很好地捕捉，但是标题 ( <h1>) 变得无法访问，因为当我尝试向上滚动查看它时，我只是被捕捉到它下面的第一段。
我的问题：有没有办法实现 CSS 滚动捕捉而不使非捕捉元素无法访问？
进一步说明：
您可能会注意到我scroll-snap-type在<html>标签上使用而不是使用容器，这显然更典型。这是因为使用容器会使事情变得更糟，引入多个滚动条并混淆容器或容器是否<body>正在滚动。此外，对于我试图实现的滚动捕捉设计，我需要强制容器本身捕捉到视口的顶部，这只会让我们回到 using <body>，或者，因为这根本不工作（不知道为什么）<html>，。
javascript - 如何控制滚动而不让它完成滚动动作或触发滚动事件？
我正在使用滚动捕捉动画效果，但与在滚动事件仅在让滚动条后完成时使用滚动条不同，当我使用 JS scroll() 控制它时，它会在每次触发事件时完成滚动动作，这会导致滚动位置为总是在捕捉点，这就是为什么在这个示例代码中滚动按钮在按住时不像滚动条那样工作
javascript - scroll-snap 滚动不流畅
我有一种抓取效果，当我们握住一个元素时，它会正常滚动，但在mouseup时，它会为容器和子项提供滚动捕捉，以便它在元素的开头停止，但是当它为元素提供类时，它会对齐立即而不是像课堂总是在那里那样顺利，我怎样才能让它动画？
javascript - 无限滚动与 scroll-snap-align CSS 属性冲突
为了允许在 a 内无限滚动<div>，我'scroll'向它添加了一个事件。当第一个孩子在视口中时，我将最后一个孩子放在前面，反之亦然。
在我引入之前，我已经让它完美地工作了scroll-snap-align。在这里，我设置了一个示例，其中一个轮播具有滚动捕捉功能，而另一个则没有。
CodePen中的相同示例。
javascript - scroll-snap 不会在 Firefox 中平滑滚动
我有一个使用100vh滚动块的简单页面，我想“捕捉”到下一个块。
这适用scroll-snap于 Chrome 和 Safari（OS Mac），但不适用于 Firefox。在 Firefox 中，页面滚动但突然停止——停止/启动也是如此。目前不确定 Edge/IE11（未经测试）。
示例包含在我当前的标记/CSS 的帖子中。
不确定出了什么问题，或者这是否是 Firefox 的常见问题 - 或者我需要一个 polyfill 或 JS 解决方案来更健壮？希望得到一些帮助，希望这不是一个大问题 - 谢谢！
css - CSS scroll-snap 隐藏在 chrome 中的第一项
我有一个父母div和overflow:scroll; scroll-snap-type:y mandatory;几个孩子，每个孩子都有scroll-snap-align:start.
在 Chrome 中，页面加载时，第一项被隐藏，父项滚动到第二项。事实上，当您向上滚动时，它会弹回第二个项目。
当我第一次拿起它并注意到height父级上没有设置，所以我将它设置为auto，（我也尝试过height: 400px，相同的结果）现在当你刷新它时，它会在第一个孩子在顶部之间交替第二个孩子在上面。
在 Firefox 和 Safari 中按预期工作。
这里发生了什么？
android - CSS Scroll Snap暂时在android上导致重复的div
好的，所以在该站点的所有设备上，该站点的行为都应如此。然而，在几乎所有的 Android 设备上，包括 Browserstack，当您滚动过去“治疗选项”时，我遇到了一个问题，内容变得非常“笨拙”。有人知道错误或我正在做的事情完全愚蠢吗？开发网站：http ://eqp.isitmeanttodothat.io
TIA