我正在为客户和男人建立一个网站，我在 Chrome 中使用 CSS Scroll Snap 遇到了困难... {{编辑后的网址}} 我在 OSX 上使用 Chrome 109.0.5414.87。 在介绍 animation（仅供参考，我讨厌这些但客户喜欢它们）之后，您应该会看到： 从第一个红色部 ...
我正在尝试构建一个简单的“主要是 css”图像轮播，它使用 scroll-snap，但也有导航按钮来控制当前正在查看的幻灯片。 我找到的唯一解决方案是在目标元素上使用 scrollIntoView() ，它可以满足我的要求，但它也总是将目标元素滚动到页面顶部。 我希望目标轮播幻灯片和容器保持原样， ...
这个jsFiddle显示了这个问题。 我正在尝试使用scroll-snap-type允许水平滚动捕捉，以便当用户滚动时，滚动捕捉到最近的 div。 我还想在用户按下按钮时滚动 div。 但是，当将scroll-snap-type应用于容器时，这似乎不起作用。 如 jsFiddle 中所示，删除sc ...
我有一个三列布局，我想在移动浏览器中滑动。 我正在使用 scroll-snap 为水平滚动定义三个可能的列/位置。 这似乎工作正常。 但是，我想将中间列设置为默认显示，以便在首次呈现页面（在移动设备上）时显示中间列，并且用户可以向右或向左滑动。 我可以使用 CSS 解决方案或滚动到中间位置的 ja ...
我正在尝试创建一个页面，其中包含始终捕捉到全屏的部分。 我使用滚动对齐对齐的 CSS 方法。 错误：在页面顶部向上滚动或在页面底部向下滚动时，会出现间隙。 您尝试向上/向下滚动的次数越多，这个差距就越大。 这个bug只出现在Edge和Chrome中，Safari和Firefox中没有。 请参阅此处的 ...
我正在尝试重新创建 Tesla.com 滚动捕捉/淡入淡出效果。 我不得不承认我是一个完全的 JS 新手，并且不知道我在用它做什么。 到目前为止，我设法让滚动捕捉工作并在固定的 div 上淡入/淡出文本。 问题是我不知道如何定位和设置不在视图中的 div 的隐藏可见性。 因此，这些层中的任何按钮都 ...
我已经成功实现了 CSS 滚动捕捉。 但是，我只将它应用到页面中间的某些部分。 当您从顶部开始滚动并且一些捕捉部分已经显示时，当您继续滚动时，捕捉已经开始。 有没有办法让滚动捕捉仅在第一部分占据整个视口时才开始？ 最后，当你从底部滚动时？ 谢谢！ 我试过的代码如下： ...
让我们想象一个在从服务器获取数据时动态插入的一些内容的示例。 目的是像滚动快照容器中的一堆项目一样显示它。 问题是浏览器以某种方式随机尝试滚动到某个元素，但我希望无论插入多少元素，容器都停留在第一个元素处。 唯一的例外是手动滚动容器的用户。 除非我添加scroll-snap属性，否则它工作正常。 这 ...
差不多就是这个问题。 我在网上到处搜索，但我找不到 css scroll-snap-stop: always用纯 javascript 编写。 我不想使用 css 属性，因为并非所有浏览器都尊重它（更不用说旧浏览器了）。 有没有人有任何类似的示例代码？ 我不知道从哪里看或如何开始。 这是我在这里工 ...
赏金将在 4 天后到期。 此问题的答案有资格获得+50声望赏金。 Can Poyrazoğlu正在从有信誉的来源寻找答案。 我正在尝试让 web 页面滚动并在用户使用scroll-snap-type: y mandatory和scroll-snap-align: start滚动浏览网页时捕捉到某 ...
如何在下一个代码中使用scroll-snap属性？： .wrapper { width: 100px; height: 100px; overflow: scroll; }.wrapper > div { width: 300px; height: 100px; display: flex ...
Scroll Snap 在 Safari 中工作，但在 Chrome 中不工作，在 Firefox 中也不工作。 两种浏览器都可以识别触摸板还是鼠标。 我的 CSS 出了什么问题？ body { overflow-y: scroll; scroll-snap-type: y mandatory; ...
我正在尝试用 3 张幻灯片创建一个基本的 slider。 这个想法是在初始视图上显示第二张幻灯片，如果用户向左滑动，slider 将显示第一张幻灯片，如果用户向右滑动它将显示右侧幻灯片。 我有最初的 slider 工作，但我无法居中。 如果我在主包装器上使用 justify-content，我将无法 ...
启用 CSS 滚动捕捉时，它会阻止 Javascript 轮事件侦听器正常工作。 我创建了一个水平网站，当使用鼠标滚轮滚动时，它使用滚轮事件侦听器在 X 轴上滚动。 如下所示： const scrollContainer = document.querySelector('.co ...
我正在尝试通过 CSS scroll-snap-type和scroll-snap-align属性使用滚动捕捉，但无论我做什么，最终都无法访问非捕捉元素。 例如，在下面的示例中。 段落 ( <p> ) 都可以访问，甚至可以很好地捕捉，但是 header ( <h1> ) 变得 ...
问题基本上我有一个有一些视频的移动网站。 每个视频占用 100% 的宽度和 100% 的高度。 我正在尝试制作滚动捕捉类型的提要，用户一次只能滚动一个视频，如果他们在滚动时到达页面上的某个点，它将捕捉到下一个视频。 这有点像 tiktok 的视频提要或 instagram 卷轴作为一个想法。 我正在 ...
我想在我的 next.js 项目中使用滚动快照 package 但我收到以下错误：我应该添加什么以及在哪里使它工作？ 相关代码： ...
我正在使用 css 滚动快照来滚动高度为 100vh。 滚动快照效果很好。 也就是说，我需要确定网站访问者由于几个不同的原因滚动了多远。 我努力了： 我也尝试过 window.scrollTop、wrapper.scrollTop 等。 这是我所看到的Codepen 我如何知道使用 100vh 部分 ...
我正在尝试建立一个投资组合网站，其中电梯向上移动，当它到达楼层时，门打开并呈现细节。 当进一步滚动时，门会关闭，当它到达某个点时，它会卡住并平滑滚动到最近的楼层。 我让它在 Firefox 中运行良好，但不是基于 chrome 的浏览器，这让我很困惑。 我还可以让基于 chrome 的浏览器移动到 ...
我设置了 CSS Scroll Snap，如果可能的话，我想对其实施缓动。 一旦捕捉到一个点，它就会滚动得太快。 有什么方法可以使用 CSS、JavaScript 或外部动画库来调整滚动捕捉速度/缓动吗？ 我的项目是一个 ASP.NET Core 5 MVC Web 应用程序。 html, bo ...