问题标签 [scroll-snap]
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.
html - 如何让 div 捕捉到水平容器的开头？
我正在创建一个带有水平可滚动 div 的网站 - 类似于 Netflix 电影导航系统，但带有可滚动的轮播而不是点击式轮播。我已将可滚动内容分类到不同的 div 中——将 4 个可见的“项目”分配给选择框——但我无法让 div 捕捉到其容器的开头。
这是我的代码 - 基本的颜色/边框只是为了让我可以告诉我在设计元素时如何影响它，所以可以随意忽略或更改它。
css - CSS“滚动快照”故障排除
我正在尝试在我的水平滚动网页上做简单的滚动快照 css，但它不起作用。关于做什么的任何想法？我的网页是 jakobnatorp.com。似乎 scroll-snap-type 和 scroll-snap-align 不是有效的命令，它们在我的 css-tool 中标记为红色。我正在为 wordpress 使用 css 插件。
CSS
感谢所有帮助！
html - 仅在向下滚动时滚动捕捉
我正在与 CSS 中的滚动快照作斗争。
有没有办法只在一个垂直方向上使用滚动捕捉？
我想让它在向下滚动时捕捉到每个部分，但在再次向上滚动时不要捕捉。是否有可能在 CSS 中或者我需要一些 .js？
javascript - 是否可以调整 css 滚动捕捉速度/缓动？
我设置了 CSS Scroll Snap，如果可能的话，我想对其进行缓动。一旦它捕捉到一个点，它就会滚动得太快。有没有办法使用 CSS、JavaScript 或外部动画库来调整滚动捕捉速度/缓动？我的项目是一个 ASP.NET Core 5 MVC Web 应用程序。
我建议扩展片段以更好地查看效果。
reactjs - 滚动快照与反应 17
我正在尝试在带有样式组件的 react v17 中使用滚动快照，但我无法让它工作。我找到了在 react v16.8中工作的代码沙盒项目，它是用类组件编写的。我正在尝试将它写在函数组件中。这是我的功能组件代码：
这是我在codesandbox.io上找到的工作项目，用类组件编写：
javascript - 基于 Chrome 的浏览器 - ScrollTo 和锚链接不起作用
我正在尝试建立一个投资组合网站，其中电梯向上移动，当它到达楼层时，门打开并呈现细节。当进一步滚动时，门会关闭，当它到达某个点时，它会卡住并平滑滚动到最近的楼层。
我让它在 Firefox 中运行良好，但不是基于 chrome 的浏览器，这让我很困惑。我还可以让基于 chrome 的浏览器移动到哈希锚点或滚动视图，但只有在使用按钮触发它们时，当交叉点观察者调用代码时它们永远不会工作？？？
我正在使用交叉点观察器来检测哪个楼层是可见的并启动打开和关闭事件，并使用一个单独的观察器来检测地板何时在屏幕上占 50% 以捕捉到最近的楼层。
我首先尝试使用滚动捕捉来避免第二个交叉点观察者对齐地板，但这在任何浏览器上都不起作用？
接下来我尝试使用 scrollToView() 函数，该函数在 Firefox 中运行良好，但在基于 chrome 的情况下却不行？
我还尝试使用锚链接让交叉点观察者找到地板，这在 Firefox 中又可以正常工作，但在 chrome 中却不行？
我感觉可能是因为鼠标滚动优先于 scrollTo 和锚链接，但我真的不明白发生了什么？
非常感谢任何帮助，但更感谢没有 JQuery 的帮助。
非常感谢
杰夫
javascript - 试图让 PanelSnap.js 在 wordpress 上工作
我正在尝试让 PanelSnap.js 在我的 wordpresssite 上工作。我的编码经验就像阅读手册和复制粘贴一样。所以如果基本的东西不正确，我很抱歉。
我下载了开发人员在 panelnap.com/panelsnap.js 上使用的 panelnap.js，并将文件上传到服务器（在子主题目录中）。之后，我将此行添加到子主题中的 functions.php 中。
下一步是使用“简单自定义 CSS 和 JS”-PlugIn 将一些 HTML 添加到 Header
和一些 JS 在页脚
如果我打开网站和控制台，它会给我这个
我什至尝试构建类似于开发人员演示的站点之一。
https://mobeil.helfersyndrom-ev.de/522-2/
感谢您花时间阅读本文，我将不胜感激每一个帮助或批评。
css - Chrome 桌面上的 CSS 滚动快照断断续续/滞后
我一直在使用滚动快照构建此页面，它在 Firefox 桌面和移动设备以及 Chrome 移动设备上运行良好。
但是在 Chrome 桌面（以及 Edge 桌面）上，我的滚动动画非常不稳定/滞后，以至于我认为它不能按原样使用。
我一直在寻找几个小时，但无济于事。任何帮助或领导或想法将不胜感激。
我在 Windows 10 上。
这是 snap 容器和项目的 SCSS：
以及匹配的 React 组件：
javascript - 使用 css 滚动捕捉时如何获取 window.scrollTop、ScrollY 或任何其他距离值
我正在使用 css scroll snap 滚动浏览高度为 100vh 的内容。滚动快照效果很好。
也就是说，我需要确定网站访问者由于几个不同的原因滚动了多远。
我试过了：
我也尝试过 window.scrollTop、wrapper.scrollTop 等等。
这是我所看到的Codepen
我如何知道使用 100vh 部分和 css scroll-snap 时滚动的距离
TIA
npm - next.js 中的 react-use-scroll-snap 包给出错误：SyntaxError: Cannot use import statement outside a module
我想在我的 next.js 项目中使用滚动快照包，但收到以下错误：我应该添加什么以及在哪里使它工作？
相关代码：