问题标签 [scroll-snap]

问题显示在这里：

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

这是重要的部分：

当设置部分的高度 > 120 或类似时，可以修复此问题，但这是一个 hack。

当我开始使用滚轮滚动时，它总是滚动两个部分，这使得整个逻辑无法使用。

我正在使用 Chrome：86.0.4240.183。

这个 codepen 示例来自：https ://css-tricks.com/practical-css-scroll-snapping/这是一个非常知名的 CSS 示例资源。

我有一个包含多个部分的网页，每个部分的宽度为 100%，视口高度为 100。我还为它们中的每一个设置了滚动快照。滚动快照从上到下发生，但是在移动版本上，我希望将内容的方向设置为水平，以便用户从左到右滚动。

有没有办法用媒体查询做到这一点？

在桌面

在移动

编辑 ：

感谢您对 scrollsnap X 的回答，但是我想知道如何在移动设备上并排制作所有部分。滚动捕捉只是为了添加一些上下文

这是我的代码的codepen。每个部分都是视频，所以在这里发布很多代码https://codepen.io/knudsem/pen/LYZqwdo

我已经建立了一个页面，其中包含几个以视频为背景的部分，每当用户滚动时，每个不同部分都会有一个滚动快照。

但是在移动设备上，我希望用户水平滚动而不是垂直滚动。我知道 scrollsnap 的诀窍是设置 type: x 强制，但要让它真正工作我需要改变我的页面布局，而不是

body = 500vh * 100vw 在桌面上（100vh 和 100vw 各有 5 段）

它成为了 ：

身体 = 100vh * 500vw 在移动设备上

有没有办法通过媒体查询以这种方式改变布局？

我为网页上的不同部分设置了滚动快照。

它在大屏幕（1200 像素和 + 宽度）或触摸板上运行良好。但是在较小的屏幕（1200 像素和 - 宽度）上，当您使用鼠标上的滚轮时，它会从第 1 节“跳”到第 3 节或从第 3 节跳到第 5 节。无论如何要解决这个问题？

这是一个简单的滚动快照演示：

我期望发生的事情

在桌面 Safari 中用鼠标滚动滚动条应该捕捉到一个项目。

发生什么了

滚动捕捉在 Safari 中无效，但在 Firefox 和 Chrome 中有效。但如果我使用触控板滚动，它确实可以在 Safari 中使用。

这似乎是一个如此简单的问题，我觉得在 Stackoverflow 上提出这样一个微不足道的问题很愚蠢，但过去 30 分钟我一直在谷歌搜索，我似乎找不到其他人有同样的问题或一些文档这解释了这种行为。甚至 WebKit 的滚动快照演示页面也没有表明它只能在 iOS 或触控板上工作；他们为什么不提这个？我错过了什么吗？

当我在 Chrome 的网页上启用滚动捕捉滚动时；它滚动，也就是说，它不会停止滚动。我的鼠标滚轮很好，我的 chrome 是最新的。它在 Firefox 中按预期工作，但在 Chrome 和 opera 等 webkit 浏览器上却没有。

我正在尝试Carousel仅使用 CSS（scroll-snap-align 方法）来实现。
这是我的代码：https ://codepen.io/kushul/pen/NWRjZLq?editors=1100

部分代码：

这已经从这个例子中实现：https ://css-tricks.com/css-only-carousel/

它在 Chrome 上运行良好，但在 Safari 和 Mozilla 上运行不正常。你能帮我解决这个问题吗？谢谢。

无论我更改 scroll-snap-type 还是 scroll-snap-align，Safari 都会丢失滚动位置并从第一个 scroll-snap 元素开始。这个问题可以在这里的滚动示例中轻松重现：https ://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type 。只需切换到 scroll-snap-type: 强制，滚动到第二个或第三个元素。然后切换到 scroll-snap-type: none 并再次返回到 scroll-snap-type: 强制。在所有浏览器中滚动位置保持不变，在 Safari 中它又从 0 开始。

为什么我需要这个？我正在使用改变 scrollTop 位置的滚动动画。在 Safari 中使用滚动捕捉时，动画不起作用，例如，当单击导航链接滚动到另一个部分时。所以我的想法是在使用导航链接时关闭滚动捕捉，并在完成后再次打开它。在所有浏览器中都可以正常工作，导致 Safari 中出现描述的问题。我也尝试更改滚动对齐对齐，但它是一样的。

有人遇到过同样的问题吗？您找到解决方法/解决方案了吗？

我正在尝试实现一个“可缩放”画廊。我希望其中一个项目的宽度在用户将其悬停但将其位置固定在窗口上时增加。

我一直在使用 CSS scroll-snap 属性，它似乎在 Chrome 和 Safari 中表现得很好。但是在 Firefox 中，当一个项目被缩放时，它会忽略滚动对齐位置。

有谁知道是否有任何 Firefox 特定属性或 polyfill 可以轻松处理这个问题？还是我必须将 snap 方法更改为基于 JS 的方法？

这是一个示例：（尝试悬停其中一个 div，在 Chrome 中它应该保持居中，在 Firefox 中它移到一边）

这是同一件事的JSFiddle

Chrome中的悬停打印：

悬停在 Chrome 1

悬停在 Chrome 2

Firefox中的悬停打印：

悬停在 Firefox 1

悬停在 Firefox 2

非常感谢！

PS：我什至不想知道其他浏览器发生了什么

我正在构建一个简单的滑块动画，该动画使用本机 CSS 滚动捕捉和滚动事件监听器进行控制。您可以在这里看到一个工作示例：https ://codepen.io/juliangarnier/pen/10d5ad6a2d9bf2cbac8e8d2e289153fa 我正在尝试在桌面上添加单击和拖动行为，不幸的是，当 scrollLeft 值为通过 JavaScript 更新。它可以通过设置scroll-snap-type: none;用户何时开始拖动但删除平滑的捕捉动画来工作。

我注意到在 Chrome 开发工具中模拟触摸事件时，滚动动画在使用鼠标时效果很好。我想知道是否可以重新创建 Chrome 开发工具在纯 JS 中使用的相同类型的触摸事件仿真。或者，如果有人设法scroll-snap-type: x mandatory;在保持捕捉动画的同时手动更新元素的滚动位置。

编辑：

这是示例的更新版本，其中鼠标事件使用

在mouseup事件上，并切换 scroll-snap 属性。

https://codepen.io/juliangarnier/pen/b3bc58f943768f5276563ae7077e41e0?editors=0100

它非常接近我想要的，但仍然缺少使用正常滚动手势时出现的滚动势头。