问题标签 [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 - CSS Scroll Snap 获取活动项目
我有css 滚动快照的问题。我想通过 javascript 检测捕捉的元素并将其分配给例如 CSS 类或类似的。不幸的是，我还没有找到检测捕捉元素的方法。背景：我有一个带有子项的列表，它们是滚动的，列表中的中间项总是应该突出显示：
布局
我已经用 rootMargin 测试了相交观察者来检测垂直居中的元素，但它的错误多于有用。
HTML：
CSS：
任何想法？
最后，您应该能够滚动浏览此时间线，活动元素应始终对齐中心并在视觉上突出显示。
html - 滚动捕捉无法正确捕捉
我正在做一个个人项目，我在这个项目中使用 scroll-snap
但由于某种原因，滚动捕捉有时会超出或落在页面两个部分之间的尴尬位置
（我建议在整页中打开片段）
经过无数时间寻找解决方案后，我放弃并降落在这里
我希望你们中的至少一个能够帮助我
javascript - 当我有滚动捕捉类型时，滚动捕捉剂量工作：y; 在身体标签上
所以我对滚动捕捉感兴趣。我试着玩了一下，但没有用。我在 chrome 和 firefox 中尝试过，都没有成功。这是我的代码，请帮忙。
css - 我可以强制滚动捕捉始终捕捉到剪切/可见元素的开头吗？
以这里的垂直列表示例为例：https ://css-tricks.com/practical-css-scroll-snapping/#example-1-vertical-list ，如果我向下滚动一点，那么第一个元素来自顶部（“Lorem, ipsum dolor.”）被削减到 50% 以下，快照将返回完全显示该元素（它捕捉到其顶部）。如果我滚动超过第一个元素高度的 50%，则捕捉到下一个元素的顶部。但是，只要第一个元素仍然有点可见，有没有办法总是转到第一个元素的顶部（例如，如果我滚动 <第一个元素的高度，我想快速回到它的顶部，如果我滚动>第一个元素的高度我想在第二个元素的开头捕捉）
css - CSS 滚动与两行对齐？
我已经成功地使用 CSS 进行滚动捕捉，但希望并想知道我是否可以实现与水平滚动捕捉相同的效果但使用 2 行卡片？（参见 CodePen 的第 2 部分）
javascript - Scroll Snap for div 看起来像 HTML 中的 iPhone
我用 HTML 制作了这个 iPhone（请不要注意意大利面条代码，它是德文的，如果有必要我可以愉快地翻译它）：
要更好地查看 iPhone，您应该单击片段中的整页。
我的问题是我有 2 个 div:#appsOne并且#appsTwo在 div 中#slider。在 iPhone 的主页上，您可以在中间看到两个应用程序 ( #appsOne) 和一个文本 ( )。#appsTwo应用程序 ( #appsOne) 应保留在原处，但文本 ( #appsTwo) 应在第二页上制作，并带有水平滚动捕捉。我怎么能那样做？
这是一个图像，它看起来像没有滑块和#appsTwodiv：
android - Android 上 Chrome 中的 CSS Scroll Snap Bug
我正在尝试使用CSS scroll-snap实现全尺寸浏览器视口滚动。但是 Android 上的 Chrome 存在一个问题（在 91 版本中测试）：当地址栏移动时（在第一次滚动或滚动方向改变时）滚动元素可能会晃动或/和仅部分滚动——而不是滚动到正确的元素点。请查看代码片段。
也许有一些方法可以使用 CSS scroll-snap 使这项工作顺利而准确地工作？同时，我想让地址栏在 Android 上的 Chrome 上移入/移出，因为它是在这个浏览器中设计的。
css - 如何使用滚动捕捉 CSS 控制/更改动画的速度？
我们如何使用 scroll-snap CSS API 控制动画的速度？
在这个例子中：https ://codepen.io/newinweb/pen/EpPgdR
它工作正常，但想象一下我希望两个元素之间的过渡（滚动动作）具有特定的持续时间（例如 5 秒）
我们怎么能这样做？如果可能的话，同样的问题是控制延迟（比如动画 CSS）
css - 为什么 css 滚动快照无法在 ios 较新版本上运行？
我已经实现了CSS Scroll Snap。我使用 chrome 开发工具在较小的屏幕上对其进行了测试。它仅适用于Moto G4、Galaxy S5、Iphone 5/6/7/8 和 Galaxy Fold。css 功能无法在较新版本的 Iphone 手机（如6/7/8 plus 和 X ）上运行。此外，它在Ipad、Ipad pro 和 chrome 开发工具中的其他设备上都失败了。
我可能会错过什么？
HTML
CSS