问题标签 [scroll-snap]

项目：我已经设置了一个滚动功能，当单击“向上”或“向下”时，它应该滚动到容器 div 中的下一个项目。它利用 window.requestAnimationFrame() 方法进行循环并在每次迭代时调用 element.scrollTo。

我这样做的原因是允许自定义持续时间，因为“行为：'平滑'”设置是一个设定的速度，我想保留 css 滚动捕捉功能，所以它需要在一个容器内（所以窗口.scrollTo() 是不可能的，尽管这似乎适用于浏览器）。

问题：这在 Safari 中完美运行，但由于某种原因 .scrollTo() 函数没有在 Chrome 和 Firefox 中移动滚动视图。

我试过的：

1. 我尝试设置 element.scrollTop 而不是调用 element.scrollTo() 具有相同的结果。
2. 我在某处读到 Chrome 的性能对于某些循环来说太快了，所以我用不同持续时间的 setTimeout(()=>{},1) 包围了 element.scrollTo()。这也不起作用。

我的代码：代码可在 Codepen.io 中查看

HTML：

JS：

抽象的

我正在使用可滚动元素创建一个图片库。我正在使用 CSS 的scroll-snap功能，它允许我捕捉到滚动条中的元素（图像）。

通过绑定到元素的scroll事件，我在用户滚动元素时应用了各种操作（例如预加载、隐藏界面元素等）。其中之一取决于滚动事件，并且需要在滚动完成的确切时刻停止。但是卷轴捕捉给我带来了一种无法预料但又无法处理的情况。

我无法准确确定快速滚动操作是否完成。

我可以setTimeout在每个滚动条上设置一个，它会自行取消并重新设置 - 有效地去抖动 - 如果不重置，最后会被调用。但是设置这个时使用的超时，可能意味着你在确定滚动完成时“为时已晚”。

底线：我如何检查滚动是否完成，或者是因为：

1. 用户已停止滚动，或者；
2. 滚动条已到达其捕捉点（scroll-snap-type已设置）

我正在尝试使用 CSS scroll-snap 使我的网站的用户体验更加愉快。虽然预期的滚动效果有效，但我的页脚在站点内的每个内容“页面”上都可见。这是基本结构：

CSS：

我打算让滚动捕捉效果允许在代表页面底部的位置main-news和main-footer位置之间进行平滑更改。main-footer在这部分中，我希望在底部有一个固定的页脚。我尝试了这两种方法position: absolute以及position: relative将bottom:0页脚放入其中，main-footer但页脚仍然出现在上 div 的底部main-news。我真的很感激每一个帮助。

我正在尝试在页面上实现滚动捕捉。我已将 scroll-snap-type 添加到容器元素并将 scroll-snap-align 添加到子部分。它在大屏幕上的 Chrome 和所有屏幕尺寸的 Firefox 上都能正常工作。但是，它似乎跳过了 Chrome 上较小屏幕上的部分。所以它会显示孩子 1、3、5 等等。下面的代码：

尝试使用 css 并更改值，但我不确定问题是什么。阅读一些关于导致问题的 chrome 错误的帖子，解决方案是添加一个包装容器，这就是我的代码所拥有的。我正在使用 React 来设计页面。

谢谢你。

编辑：添加了 gif 来帮助我解释行为：

正确行为 - 大型外部屏幕 - Chrome：

错误行为 - 笔记本电脑屏幕 14" - Chrome：

Safari 截图

所以我一直在尝试让部分在滚动时粘在屏幕顶部。

我已经使用scroll-snap-type: y mandatory;了htmlandbody元素和scroll-snap-align: start;子（部分）元素。

这在 Chrome（Windows 10 和 MacOS Big Sur）和 Edge 上按预期工作，但在 Safari 上无法正常工作。在 Safari 上，滚动超出了几百像素，裁剪了所需部分的顶部，并使下一部分的开头可见。每个部分的差距似乎都越来越大。我已经尝试过：

在父母身上，和

对儿童。

边距/填充值似乎都没有改善结果（其中一些甚至使间隙变大或完全破坏滚动）。

scroll-snap-type: y proximity;按预期工作，但这不是我想要的效果。

请检查这个codepen，那里描述了问题。还有一个演示。
https://codepen.io/NeXTs/pen/abBwXVw

我已经在 Mac 和 Windows 上测试过了。

Chrome 中的相同行为（在 mac 和 windows 上）
同时其他浏览器（甚至是 webkit 上的 Safari 和 Opera）不会立即跳转到最近的快照点。

这是一个错误？
如果是这样，我可以报告它的正确位置是什么？或者我可以询问的正确位置（与 webkit 相关）是什么？

我正在尝试滚动捕捉到 Vue.js 3 中的组件。我可以让滚动捕捉与 vanilla HTML 和 CSS 一起正常工作。这是它的样子：滚动快照演示

我试图复制那个简单的布局，但使用 App.js 作为容器和组件作为 div。这是它在 App.vue 中的样子：

这是我所拥有的组件，它们基本上彼此相同：

我也尝试使用 vue-scroll-snap 但它似乎不适用于组件，就像指南显示它在 div 上工作的方式一样。这是我尝试过的指南：Vue Scroll Snap Guide

这是我使用该方法获得的 App.vue 的内容：

组件与其他方法相同。

页面显示正确，但这些尝试中的任何一种都没有滚动捕捉效果。我想尝试使用组件作为全屏元素来捕捉，这样应用程序会更好地扩展。

+++ 解决方案 +++

Ivo Gelov 是正确的，从 中删除类<template>，将组件放在 div 中，并给它类“容器”。出于某种原因，仅此一项还不够，该课程需要更多的风格才能发挥作用。这是该类的最终 CSS：

我实际上是在尝试制作与该网站类似的滚动效果：https ://kuon.space/

我已经使用 scroll-snap 做了一些东西，但我想像网站一样禁用自由滚动，如果有人滚动 scroll-snap 动画立即开始并显示上方或下方的 div，用户将无法滚动自由地在网站上，如果他想去网站的顶部/底部（就像我放在上面的网站），就必须一个一个地传递所有的 div 所以我正在寻求帮助，因为我被卡住了，我不要现在从哪里开始

这是否包括使 js 或 css 只能工作？提前感谢！

使用 CSS snap scroll 时，我遇到了一个奇怪的行为。对于 Safari 和 Firefox 没有问题，但它发生在 Chrome（桌面和移动）中。我正在尝试重新创建一个 Android ViewPager2，因此滚动中的每个元素都包含用户将与之交互的图像和文本。

会发生什么：对于具有 n 个元素的水平滚动条，如果您到达 n 然后向后滚动以与之前的元素之一进行交互，滚动条就会混淆。如果在向后滚动后您与第一个元素交互，它认为它仍然在最后一个元素上。如果在向后滚动后你与第二个元素交互，然后与第一个元素交互，它认为它仍然在第二个元素上。

有什么想法吗？

如果您在 Chrome 中使用它，这是一个捕获问题的粗略 Codepen：

https://codepen.io/augustus-vogel/pen/yLVmbma

您可以看到在到达末尾之前单击红色部分元素的正确行为（它将在上方显示一个带有蓝色关闭按钮的白色信息框）。单击蓝色框将其关闭（最好在再次滚动之前关闭，因为我没有在笔中添加观察者以自动关闭）。

要得到错误，来回滚动几次（确保到达最后一个元素（示例中的#4），然后单击第 1 节。它将打开信息容器 1，但滚动会跳转到最后一个元素元素，第 4 节。

谢谢你的帮助。

这是代码：

HTML：

CSS：

JS：

我在考虑 css 中的滚动对齐对齐时遇到了一些问题，可能是由于 chrome 中的一个熟悉的错误。
我找到了两种使滚动对齐对齐的方法，但两种方法都不能正常工作。

1. 选项 1 - 在 html 标记中使用 scroll-snap-type：

2. 选项 2 - 在容器（文章）标签中使用 scroll-snap-type：

问题是选项1导致chrome中的双滚动错误，我还没有找到解决方法（更改背景颜色对我不起作用），选项2根本不会做任何事情，就好像我没有写这行代码一样。

我也试过玩overflow-y，overscroll-behavior-y或者改变height容器的，但他们都没有解决这个问题。

我会非常感谢任何愿意帮助我的人:)

PS如果它以某种方式很重要，我正在使用create-react-app。