问题标签 [scroll-snap-points]
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 - 如何使用滚动魔法滚动快照并全屏？
我想在此页面上创建一个类似于“应用程序计时器”部分的部分（位于底部）：https ://www.android.com/versions/pie-9-0/ 。我的页面上只能有一个这样的部分，其余部分是正常滚动。
我看到他们使用 scrollmagic，但我似乎无法在他们的文档中找到与此类似的示例，或者任何人都做过。我考虑过使用 fullpage.js，但我似乎无法让它只在中间激活一个部分的情况下工作。
有什么建议么？
javascript - CSS 滚动捕捉延迟多长时间？
在您滚动一个具有某种 CSS 滚动捕捉活动的容器后，从用户滚动结束到浏览器开始滚动到捕捉位置的延迟是多长时间？
动机
我写了一个回答CSS Scroll Snap with Animation Effect的问题，我scrollend通过 250 毫秒去抖动滚动事件回调来模拟一个事件。这似乎已经足够接近 Chrome 浏览器的真实价值了。但是获得一些一流的价值会很好。甚至可能在某个地方有一个 API，这样我就可以通过 JS 获得正确的值。
css - 垂直滚动捕捉实现不起作用
我有一个带有一些语义 UI 样式的反应应用程序。我正在尝试使用我的网站部分实现滚动快照。我尝试添加 scroll-snap-type: y 强制；和滚动对齐对齐：开始；在这样的正文和部分中：
我还在容器和部分中添加了这些：
我也尝试过像布拉德·特拉弗西在他的一个视频中所做的那样来实现它。我添加了溢出：隐藏；在身体和容器看起来像这样
也没有工作。
我还在 react 应用程序中使用从语义 UI 导入的容器，所以我不确定这是否与它有关，但是当我尝试以这种方式实现时，滚动条也会消失。
css - CSS scroll-snap 的替代品？
我在 Chrome 版本 75.0.3770.100 和 Firefox 版本 67.0.3 上测试了 CSS scroll-snap 它在 Chrome 中运行良好，但在 Firefox 中我得到了奇怪的结果。根据MDN，Firefox 仅从版本 68 开始支持滚动快照的新规范，我可以确认使用新规范，它根本不起作用：
然而，使用旧规范（如建议的那样），它似乎有点工作，但非常不稳定和不稳定，并且似乎很多时候向后滚动：
我还没有找到任何解决方案（CSS 或 JS）可以在我的 Firefox 版本（一点也不旧！）中复制这种行为。到目前为止，我拥有的最佳解决方案是我自己的自定义 JS 替代方案，它只是等待用户停止滚动，然后将它们平滑滚动到最近的捕捉点。但这并不理想，因为它感觉不是很自然 - 它会减慢到自然停止，然后自动滚动到快照点。
这是我的 Codepen 游乐场：https ://codepen.io/mrseanbaines/pen/WqErwZ?editors=0100 。如果我在两个浏览器中加载同一支笔，我会得到上述行为。
有没有人遇到过任何解决方案？
css - 到达顶部时CSS滚动捕捉溢出身体
我有一个很奇怪的问题。也许scroll-snaps行为中的错误？
当我到达页面顶部并继续向上滚动时，如果我不再向下滚动，身体就会溢出并停留在那里。即使我重新加载页面。
仅在 Mac 版 Chrome（版本 75.0.3770.100（官方构建）（64 位））中发生，我已经在 Safari 和 Firefox 中对其进行了测试，并且两者似乎都表现正常。
Jsfiddle在这里，但你不能在那里复制它。可能是因为它在 iframe 内？
问题视频：
javascript - 在 JavaScript 中的数字选择器小部件中居中选定项目
[前提]
我很难弄清楚如何使Number Picker Widget的行为类似于移动选择器组件。如果用户默认分配一个数字，那么selected在页面加载时数字应该自动对齐到中心。
[问题]
- 默认情况下，如何将此元素捕捉到滚动端口
<div class="cell selected">10</div>的中心？ - 不要依赖任何插件。
[预期结果]
html - 溢出大于 100vh 的 CSS 滚动捕捉点？
当容器高于 100vh 时，我无法实现滚动捕捉点。我想使用强制捕捉点，但也允许用户在高度大于 100vh 时滚动。
我通过在我希望用户能够滚动而不捕捉到高于 100vh 的 div 顶部的情况下添加额外的捕捉点来完成这项工作。
我希望能够自然地滚动通过一个高大的容器，而不必总是在滚动时卡在顶部。这种方法在 Chrome 中有效，但在 Safari 中，任何溢出都会将用户捕捉回父级的顶部。有没有办法在高于窗口高度的容器上使用捕捉点，同时能够滚动溢出？
react-native - React Native snapToOffsets 只为一个快照，然后正常滚动
使用 react native，ScrollView 可以捕捉到 ScrollView 元素的 y 轴上的重新指定点：
这将捕捉到 0 和 96。然而，似乎还必须声明每个后续捕捉点。
有没有办法在 96 处捕捉到该点，然后正常滚动而不会从该点向下捕捉偏移。
这种行为可以在 Web 上使用 CSS 完成，但没有明确的文档说明如何在 react 中做同样的事情。想象一下我们想在第一次滚动时捕捉到下面的标题，然后再正常滚动。
css - 像 Firefox 一样的 CSS Scroll Snap 行为
我在除 macOS 和 android 上的 firefox 之外的所有浏览器上都遇到了问题（尚未测试过 windows 和 ios），其中滚动捕捉被延迟。在 Firefox 上运行良好，但在 Edge、Chrome 和 Safari 上运行延迟。有什么解决办法吗？
我的代码：
编辑：添加了 html 片段
css - 如何实现滚动捕捉停止：总是；
我创建了一个水平滚动，但我试图控制用户在他们的手机屏幕上滑动时如何滚动。因为当用户用力滑动时，他们仍然会被带到 B 区，而不是直接到 D 区。因此，如果一个人想要移动到 D 区，他们将不得不在屏幕上滑动 3 次，而不仅仅是一次强大的滑动刷卡。我试过使用 scroll-snap-stop: always; 但这似乎没有帮助