问题标签 [scroll-snap]

当容器高于 100vh 时，我无法实现滚动捕捉点。我想使用强制捕捉点，但也允许用户在高度大于 100vh 时滚动。

我通过在我希望用户能够滚动而不捕捉到高于 100vh 的 div 顶部的情况下添加额外的捕捉点来完成这项工作。

我希望能够自然地滚动通过一个高大的容器，而不必总是在滚动时卡在顶部。这种方法在 Chrome 中有效，但在 Safari 中，任何溢出都会将用户捕捉回父级的顶部。有没有办法在高于窗口高度的容器上使用捕捉点，同时能够滚动溢出？

我正在尝试将垂直滚动的页面与每个段落（每张照片描述）对齐。我也想body成为我的滚动容器，而不是一些div里面body。

我有：

这在 Chrome 和 Safari 中完美运行，但在 Firefox 中不起作用。Firefox 检查器显示这些应用于标签的 CSS 属性，但滚动不会捕捉。

如何在不创建额外滚动容器的情况下使其在 FF 中工作？

我使用 scroll-snap 属性用 CSS 制作了一个滑块。但是我想让我的滑块每隔几秒钟自动滚动一次，但用户也应该能够来回滑动。到目前为止，用户可以来回滚动，但是当我使用@keyframes 添加动画时，当@keyframes 自动向前滚动时，用户无法返回滑块。

我有该项目的现场演示。我删除了自动滚动的@keyframes 动画。目前，它只能在移动设备中通过触摸滚动。或者，您可以使用笔记本电脑的触摸板滚动。

我想要做的是，我需要为我的滑块提供自动滚动功能，但我希望我的用户也能够在滑块中来回移动。感谢您对 Javascript 的任何帮助。（这可能是我将在我的项目中使用的唯一 JS。）

这是现场项目：https ://sametweb.github.io/daimahaberv3/ 我的主滑块是最大图像的滑块，页面上的第二行图像。

我使用了这个@keyframes 动画，但用户无法滚动滑块中的先前项目。

我的滑块容器和滑块项 CSS：

我需要一个解决方案，要么解决@keyframes 滑动先前项目的问题，要么使用 Javascript 添加自动滚动行为。

我scroll-snap-type习惯于在 DIV 中移动并将它们放入视图中。我想要做的是默认将视图设置为第二个 DIV，因此当页面加载时会看到“默认情况下应该查看”的 div，然后用户可以向左或向右滚动。

我怎么能用 CSS 做到这一点？（没有 JS）

https://jsfiddle.net/2hcgoL1b/2/

这是来自csstricks.com的两个 CSS 滚动快照示例

• Example #0适用于 Windows 上的 Chrome
• 示例 #3不起作用

为什么其中一个起作用，而另一个不起作用？两者有什么区别？

示例 1：

示例 2：

您可以按Space Bar,Page Up / Page Down和Left Arrow / Right Arrow键水平滚动我的演示页面。您还可以使用鼠标或触控板捕捉滚动。

但只有一种或另一种有效。

有没有办法让键盘事件和 CSS 滚动捕捉可以共存？我错过了什么？任何帮助将不胜感激，因为我已经为这个问题苦苦挣扎了一个多星期。

查看我在 CodePen 上的演示

（请取消注释相关的 CSS 代码以启用滚动捕捉效果，以查看键盘快捷键停止工作。）

注意：我正在使用一个名为Animate Plus的小而优雅的模块来实现平滑的滚动动画。

更新：@Kostja 的解决方案适用于 Chrome，但不适用于 Mac 或 iOS 的 Safari，它在 Safari 中适用对我来说至关重要。

我尝试在一个简单的 create-react-app 应用程序中实现 css scroll-snap api。而且它似乎不起作用。

所以，我想知道它是否受支持，或者是否有一种特殊的方法可以通过反应来做到这一点？

所以我的垂直滚动捕捉部分都是 100vh 和 100vw。我打算出现单独的页面。其中一个部分具有与 100vh 和 100vw 部分相同的水平滚动部分。好吧，在我添加 ul 标签之前，一切都很顺利。div 也是如此。然后水平部分的高度开始变化。它们仍然是页面宽度的 100%，但高度会有所不同。滚动捕捉仍然有效。继承人的代码：

HTML

CSS

顺便说一句，我scroll-snap-type: y mandatory;以 html 容器为目标的原因是，如果您以 body、main 或专用 div 容器为目标，它似乎不起作用。我认为这与当前的问题无关，但我想我会提到它，因为我认为这是奇怪的行为。

我尝试给列表 0 边距，我认为这并不重要，而且看起来它没有因为没有任何改变。ul 标签形式的列表和内部带有 h3 的 div 似乎都改变了 h-child 部分的高度。据我了解，div 在自己或类似的东西之后创建一个空行。我不太明白。好吧，如果我将 div 更改为 font-size 0，所有 h-child 部分的高度都相同，但是所有内容都是不可见的，因为所有 font-size 现在都是 0。

我还尝试将 .list 设置为 font-size 0 并且也有效。所有部分的大小都合适。然后，我将 16px 的字体大小添加到列表中的项目，而不是列表本身，这会再次在每个部分的顶部添加空白空间。这让我感到困惑，这怎么可能。.list 位于 h-child 部分内。为什么它的高度变了？！那应该是不可能的！我几乎对这种布局失去了所有希望。我想不明白。

有关此操作的示例，您可以在项目部分查看我的投资组合网站kudlanov.com（这是一项正在进行的工作）。我在那里有更多的元素和样式，但我在上面的代码上进行了测试以查明问题，它似乎与.lists有关。

当我有一个.sections包含多个.section元素的容器并设置滚动捕捉时，它只有在我给该部分提供 100vh 的固定高度时才会起作用。没有高度，滚动捕捉将不起作用。这很好，除了没有固定高度，scrollTo工作正常，当我将高度添加到部分时，scrollTo不再工作。

这是一个例子。您可以在 CSS 中注释掉该height: 100vh;行，.section并看到单击任意位置将向下滚动到第 3 部分，但打开高度后，它不会滚动。

我已经尝试到console.log它滚动到的位置并且它是正确的，但是滚动实际上从未发生过。关于为什么这不是我想要的方式的任何想法？

注意：我在最新的 Chrome 中看到了这种行为。我还没有测试过其他浏览器。

我尝试使用滚动捕捉功能，但它不起作用。我很困惑 - 我做错了什么？

HTML：

CSS：

https://codepen.io/Shampie/pen/vYOrOEW

提前致谢！

（首先代码不够，现在代码太多，我需要更多文字......我不知道还能说什么）