问题标签 [scroll-snap]

我用快速滚动在 wordpress 中创建了一个可滚动的容器。它包含一个投资组合模块。

并且有一个按钮可以在点击时滚动。

这是我用来实现点击滚动的javascript代码。我在这个平台上找到了它，只是重命名了 ID 和类：

我对javascript不太了解，所以我只是把这段代码放在我的网站上，希望最好。幸运的是，它有点工作。但问题是，如果我单击按钮向下滚动，它只能工作一次。如果我第二次点击，它就不再起作用了。我发现当我调整窗口大小时它可以正常工作，但这不是解决方案：-D“嘿，用户，请调整窗口大小以使该网站正常工作”

我非常感谢任何想法和代码片段！！！

我试图获得粘性定位以使用滚动快照，但我遇到了困难。

我查看了关于如何使用滚动捕捉的 CSS 技巧（在 codepen 链接中）的示例，发现如果你没有它会中断

在容器上（在第 3 行注释掉）。但如果你这样做，那么它会破坏我的两列粘性滚动。有人对我如何使用两者有任何想法吗？

https://codepen.io/shellwe/pen/abzgNzQ

如果没有人对如何在 JS 中实现滚动捕捉有一些好的建议？我发现这可能有效，但我希望 CSS 为我处理它。

http://jsfiddle.net/kZY9R/79/

我一直在开发一个带有屏幕填充“幻灯片”的单页网站，如果可能的话，我真的很想使用滚动捕捉。几天前我让它运行得很好，但是自从 Chrome 更新以来，整个事情都被打破了：当使用滚轮时，它不是平滑地捕捉到一张幻灯片，而是一次快速地跳过两张幻灯片。

起初我认为这是因为我也在使用 jQuery/JS 来控制一些滚动事件，但我只是注意到启发我采用这种方法的原始笔有完全相同的问题。事实上，当完全关闭 JS 甚至将代码剥离到最基本的部分时，它仍然无法正常工作。

原笔： https ://codepen.io/team/css-tricks/pen/yLLqqgP

编码：

有人知道这里发生了什么吗？它适用于所有其他现代浏览器，并且曾经在 Chrome 中运行，直到更新到版本 81。

长话短说，在 Chrome (81.0.4044.138) 上，滚动捕捉由于某种原因跳过了中间 <div class="item2">。在 Firefox (76.0.1) 上运行良好。知道为什么吗？

我有一个可以包含很多消息的聊天框。每次发送新消息时，由于 css snap 属性，div 会向上滚动到底部。

但是，如果我想向上滚动，div 会自动回到底部。如何允许持续向上滚动，并且只有在将新消息添加到列表时才返回底部？

这是一个代码想法：

谢谢！

我在我的 Angular 应用程序中使用 CSS scroll-snap 从第 1 部分滚动到第 2 部分等。它在 Firefox 中工作得非常好，但在 Chrome 中却不行。在 Chrome 中它跳得太远并且总是跳过一个部分（当使用鼠标滚动时，使用触摸板它可以按预期工作）。

到目前为止，我已经弄清楚这是因为容器元素已position: absolute设置。这是必需的。

这是我的Codepen

我在移动版 Chrome 上遇到了一个奇怪的故障：我有一个使用滚动快照的网页，如果我向下滚动整个 chrome 浏览器会闪烁，包括地址栏！我不知道为什么。它可以在其他浏览器上完美运行，所以我认为这不是代码问题。这是我正在谈论的问题的 gif。故障 GIF

我在除 macOS 和 android 上的 firefox 之外的所有浏览器上都遇到了问题（尚未测试过 windows 和 ios），其中滚动捕捉被延迟。在 Firefox 上运行良好，但在 Edge、Chrome 和 Safari 上运行延迟。有什么解决办法吗？

我的代码：

编辑：添加了 html 片段

我希望我的部分占据整个页面，并且一旦用户向上或向下滚动，就会出现上一个/下一个部分。它在 Firefox 和 Chromium-Edge 上完美运行，但是当我在 Chrome 上测试它时，它总是跳过一个部分（从第 1 节到第 3 节，从第 3 节回到第 1 节）。我能做些什么来解决这个问题？

这是HTML：

这是CSS：

如果有人想自己看，这里是网站：在 Firefox 和/或 Chrome 中打开以查看差异

我正在用 HTML 编写一个网站这是 Visual Studio 告诉我的学校内容，CSS 文件无法识别我的 snap-scroll-type 标签和我的 snap-scroll-align 标签。我正在用 Atom 写作，但由于这个问题，我尝试了 Visual Studio，但它仍然无法识别标签。 这是我的代码