问题标签 [scroll-snap]

我编写了同一个主页的两个版本：一个是快速滚动，另一个是当我向下滚动时标题导航隐藏并在我向上滚动时显示。

问题是我无法让它们一起工作，因为我必须删除“溢出：滚动”和“高度：100vh”才能使菜单隐藏工作，但这将阻止快照滚动到功能。

这些是我的风格：

我已经为标题使用了三个不同的 js 脚本，但都归结为同一个问题：文章选择器中的溢出/高度样式。

任何想法如何让它发挥作用？先感谢您！

我受到劳斯莱斯网站的启发，也想在我的网站中实现相同的滚动捕捉功能，我使用 HTML 默认值实现了它，scroll-snap-type这给了我预期的行为，但创建了两个滚动条，一个用于容器，另一个用于主体，哪个不出所料，所以我尝试使用，IntersectionObserver但它导致了一个问题，当直接从第一张幻灯片跳到第三张幻灯片时，我只能前往相邻的幻灯片。

这是代码沙箱链接：https ://codesandbox.io/s/scrollsnap-forked-pre0c?file=/pages/index.vue

这是我正在工作的代码

问题很简单。我有一个单页网站，它有六个相等（高度和宽度）的部分。我在这些部分的顶部放置了锚标记，以便用户可以使用菜单直接跳转到特定部分。

我希望页面仅在这些锚标记之间滚动。因此，如果用户滚动页面，它应该从一个锚标记滚动到另一个锚标记，而不是在两者之间停止。

要记住的几点：

1. CSS SCROLL SNAP 无法以某种方式工作，因为设计太复杂了。而且 SCROLL SNAP 也不适用于锚标签。

2. 我正在使用 javascript 来完美地实现它。但是页面滚动在每个锚标记处停止一秒钟后会通过多个锚。因此，如果我能以某种方式修改 mousedelta 或在当前脚本中添加一些函数以在到达每个锚标记后停止滚动，直到用户再次滚动，那么它就可以解决问题。我不精通 Javascript，所以请帮我解决这个脚本。

对此非常新，但我有一页有滚动捕捉功能的部分，但是当在 chrome 上查看时，过渡根本不平滑，它从一个部分跳到另一个部分太快了。有没有办法解决这个问题？？

https://www.matthewjameswilson.com/

这是我正在使用的代码：

使用带有滚动捕捉的无限列表时，在 Chrome Mobile 中滑动滚动或在 Chrome for Windows 中激活移动模式时，在底部添加新元素时，滚动位置似乎会跳跃（屏幕闪烁）。当按住手指或鼠标同时向下滑动滚动直到加载新元素时，效果尤其明显。滚动位置向上跳一个元素。

例子：

如何使用 JS 创建滚动捕捉效果？当我将 css 属性添加到我的容器时，我不再能够单击并拖动容器。有没有办法用香草达到类似的效果？

示例代码框。

此问题发生在 Safari 中。滚动经过 iframe 元素时，滚动捕捉似乎中断。具体就我而言，当光标悬停在嵌入的 youtube iframe 上时会发生这种情况（当光标位于同一父 div 内但不在 iframe 上时工作正常）。

问题： 而不是平滑地捕捉到下一个滚动捕捉对齐，它似乎拍摄或加速到最后一个捕捉对齐或页面底部。

在同样的情况下，chrome似乎没有出现这个问题。

有没有其他人遇到过这个问题或有解决方案？谢谢。

我想我现在只禁用滚动捕捉。

我正在创建一个登录页面，其中顶部具有正常滚动，然后是启用滚动捕捉的容器，然后是正常滚动容器。但是当我启用滚动捕捉时，我无法移出中间容器。我看不到上半部分，也看不到下半部分。

这是启用滚动捕捉的容器

我究竟做错了什么？

一直在玩滚动捕捉，看起来用 JS 编写功能可以省去很多麻烦。

这是一个挑战，有没有人找到一种方法来选择性地选择要捕捉的孩子和自由滚动的孩子？

我认为这对于包含无法从滚动捕捉中受益的部分的内容丰富的页面很有用。

这是问题的一个例子： https ://codepen.io/nodelondon/pen/YzxWqLG

理想情况下，带有 -1,0,5 和 6 的框应该能够自由滚动，但它们之间的强制框会一直拉你回来。

如果您正在考虑建议将其更改为接近，这是一个很好的建议，但是，对于 IOS Safari（对我来说也是在 OSX Safari 上），不幸的是，它仍然会强制滚动对齐设置为的框上的滚动对齐无论您在页面上的哪个位置开始。

我是 React 新手，我正在尝试将下面的代码转换为函数组件，但它不起作用，我从未使用过类组件。谁能帮我转换一下？提前致谢。