可滚动面板捕捉到滚动上的元素
有没有一种方法可以在可滚动 div 内随着用户滚动来捕捉元素。
例如,如果我们有CSS(如)
.container {
height: 300px;
width: 200px;
overflow: auto
}
li {
height: 40px;
width: 100 % ;
}
和HTML(如
<div class="container">
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
</div>
),那么容器应该有一个垂直滚动条。当用户滚动时,我希望这样当他们停止滚动时,最终滚动位置会将容器滚动位置捕捉到显示的最近的 div。这可能很困难,因为像 safari 这样的浏览器也提供动力,所以它必须是滚动端的事件。
任何想法是否可能,以及如何实现。
奇妙
Is there a way inside a scrollable div to snap to elements as the user scrolls.
For example if we have CSS such as
.container {
height: 300px;
width: 200px;
overflow: auto
}
li {
height: 40px;
width: 100 % ;
}
and HTML as
<div class="container">
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
</div>
So from that the container should have a vertical scroll bar. When the user scrolls I would like it so that when they stop scrolling the final scroll position snaps the container scroll position to the nearest div at shown. This might be difficult as browsers like safari offer momentum as well, so it would have to be an event on scroll end.
Any ideas if this is possible, and how.
Marvellous
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
可以使用setTimeout。这应该有效
You can use setTimeout. This should work
您可以使用 CSS 滚动对齐。
但是,该功能现已弃用,因此如果您想考虑跨浏览器原生 javascript 重新实现本机 CSS Scroll Snap 规范,如此处已回答的:如何在 Chrome 中模拟 CSS 滚动捕捉点?,你可以使用
这个库是我写的。
使用此解决方案而不是本机 CSS 解决方案的主要原因是它适用于所有现代浏览器,并且具有可自定义的配置,允许在转换和滚动检测中自定义计时。
该库使用普通的 javascript 缓动函数重新实现了 css 捕捉功能,并使用容器元素的
scrollTop
/scrollLeft
属性和 scroll 的值进行工作。 em> 事件监听器这是一个展示如何使用它的示例:
您可以看到一个工作演示 这里
You can use CSS Scroll Snap.
However, the feature is now deprecated, so if you want to consider a cross-browser vanilla javascript re-implementation of the native CSS Scroll Snap spec, as already answered here: How to emulate CSS Scroll Snap Points in Chrome?, you can use
this library I wrote.
The main reason to use this instead of the native css solution is that it works in all modern browsers and has a customizable configuration to allow custom timing in transitions and scrolling detection.
The library re-implements the css snapping feature using vanilla javascript easing functions, and works using the values of the container element's
scrollTop
/scrollLeft
properties and the scroll Event ListenerHere is an example that shows how to use it:
You can see a working demo here