问题标签 [scroll-snap-points]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

31 问题
Newest
Active
Bountied
318
Unanswered
0 投票
1 回答
385 浏览

html - @font-face 阻止滚动捕捉点工作？

我知道它仍然是非常新的和实验性的，但是一直在玩 css scroll-snap，并且有一段时间无法让它工作。

我最终意识到，当我在我的 css 中使用 @font-face 时，滚动捕捉不起作用。如果我将字体系列更改为“Arial”而不是我定义的字体，它可以正常工作。

还有人遇到这个吗？

代码笔： https ://codepen.io/galvinben/pen/LgzLxK

（更改字体系列后可能需要刷新页面才能看到它工作/不工作。）

0 投票
2 回答
1752 浏览

javascript - 以编程方式在儿童上设置“样式”时，iOS 上的 CSS Scroll Snap 视觉故障

https://codepen.io/thomaslindstr_m/pen/qJLbwa

上面很简单的例子。我想淡出我滚动离开的孩子，但是当 CSS Scroll Snap 启用时，它在我的 iPhone iOS 12.0.1 上开始出现非常糟糕的故障。

在此处查看视频： https ://file-qacepzxlkb.now.sh/

在重新加载之前，我禁用了 Scroll Snap（JavaScript 仍在运行），在重新加载之后，我启用了它。

这是JavaScript：

CSS 摘录：

关于导致此问题的原因以及可能如何解决的任何想法？我意识到这可能需要破解，因为它在 macOS 上的 Chrome 70 中运行得非常好。

0 投票
2 回答
538 浏览

html - CSS snap scroll 工作的基本要求是什么？

我一直在尝试实现一个超级简单的水平快照滚动（如下所示：https ://css-tricks.com/practical-css-scroll-snapping ），但我一直失败。我可能已经在这里搜索了所有问题和答案，但没有任何帮助。

我的代码很简单，我只scroll-snap-type: y mandatory;在父母和scroll-snap-align: center;孩子身上声明。而且我很确定这不是浏览器问题（因为我已经用许多不同的浏览器尝试过）。我在这里想念什么？或者我不明白什么？

这是我的（不工作的）CodePen：https ://codepen.io/anon/pen/XyNNGY

html:

CSS：

已经谢谢一百万了。

0 投票
1 回答
1478 浏览

css - 第一次删除规则然后再次添加时，css scroll-snap 不起作用（chrome）

我有一个容器scroll-snap-type: y mandatory;和子元素scroll-snap-align: start;。在 chrome 中，滚动捕捉按预期工作。然后我通过js删除关于scroll-snap-type的css规则并稍后将其设置回来。之后，捕捉不起作用。这是一个错误吗？难道我做错了什么？这种行为符合规范吗？还是有解决方法？

（我只在 Windows 机器上的 chrome 浏览器中测试过它。）

演示： https ://jsfiddle.net/gjcs3y6k/2/

0 投票
1 回答
2279 浏览

ios - CSS 仅在 iOS 中滚动捕捉

我正在尝试在应用程序中实现仅 CSS 的滚动捕捉行为，但发现它在 iOS 中无法按预期工作。这是演示案例的CodePen的链接。

代码附在下面

我在相应的 MDN 页面中包含了一些我在相应的 MDN 页面中学到的多余的 CSS 规则，但我也尝试过没有它们，但没有运气。

我怀疑问题是由于和的组合引起的flex，scroll-snap但我不确定是否是这种情况。

PS：SO中有一些讨论滚动快照问题的线程。其中之一结合了 JS + CSS，这并不是我想要做的。

0 投票
3 回答
3253 浏览

css - css scroll snap 不适用于 React 应用程序中的 div

我在不同的最新浏览器上对其进行了测试，因此它不会是兼容性问题。我正在使用带有样式组件的 create-react-app，这是我的代码：

当我滚动时它什么也没做，我几乎尝试过任何东西。如果没有样式组件，它也将无法工作。

编辑：我将我的代码复制到代码沙箱：https ://codesandbox.io/s/72jmn1p1w1

0 投票
1 回答
957 浏览

html - 当您尝试放大时，CSS 滚动捕捉卡住

CSS-scroll-snap运行良好。但是，当您用一根手指在移动设备上滚动时，将这根手指静止在屏幕上并用另一根手指向相反方向滚动（如缩放↕），然后滚动捕捉将卡住。（无论在哪个浏览器上）

当您在滚动时按住 Ctrl 键时，它甚至可以在桌面上运行。

我不知道这是否是一个常见问题，但我找不到任何修复或解决此问题的方法。

有什么建议么？

自己试试：

0 投票
0 回答
3402 浏览

css - 是否可以将 CSS Scroll Snap 应用于 HTML 标签而不是 Body 标签

CSS Scroll Snap 允许浏览器将滚动捕捉到容器中的元素。要将相同的逻辑应用于垂直页面滚动，我发现它必须应用于<body>而不是<html>（见下文）。这不是一个主要问题，但它确实有效地创建了一个滚动区域，<body>而不是使用窗口滚动。

虽然这看起来不错，但它有几个副作用：

  • javascript中不能再使用窗口滚动功能
  • Apple 浏览器上的橡皮筋效果响应速度较慢，并且在 Mac 上的 Chrome 中不存在。

我希望它看起来尽可能原生，因此唯一的结论是将它应用于<html>而不是<body>. 但是，以这种方式应用它会阻止它发挥作用。如果将其应用于两者，它将在 Safari 中正确呈现，但在 Chrome 和 Firefox 中仍会损坏。

问题不是因为<body>在父元素和子元素之间创建了分离，就好像<div>在层次结构中添加了另一个元素一样，它仍然可以正常工作。

这是功能代码，但适用于<body>而不是<html>.

解决一个小提琴：https ://jsfiddle.net/u8tsjven/

0 投票
1 回答
1838 浏览

css - 使用 scroll-snap-type 和 -align 没有滚动捕捉 / 简单示例无法正常工作 Chrome/Firefox /

使用 Chrome / Firefox，我为几张图片创建了一个容器 (.container)（列出了 img 类的项目）。我在容器上添加了滚动捕捉类型。我在 img 类的项目上添加了滚动对齐对齐。

我在这里想念什么？

HTML

CSS

0 投票
0 回答
751 浏览

html - 使用滚动捕捉和位置粘性进行堆栈滚动

我正在scroll-snap结合使用position: sticky这似乎是一种在滚动时启用堆叠卡片效果的优雅方法。

它在桌面上运行得非常好，但在 Safari (iOS12.1) 上我遇到了一些小故障，有时卡片会一起滚动，跳过内容。

在移动 Safari 上复制该错误的最明显方法是：

  • 向下滚动到最底部的屏幕
  • 关闭（模糊）并重新打开 Safari
  • 然后尝试再次向上滚动

遇到的错误：它正在跳过所有屏幕，使导航变得不可能。

我想让它只与 CSS 一起工作，但我愿意接受任何（好的）解决方案。最后，它意味着在 ReactJS 应用程序中工作。

演示：https ://codepen.io/theo_t/full/BbGoWq


12345678910