Javascript 航点（或替代方案）

发布于 2025-01-09 05:21:07 字数 596 浏览 0 评论 0原文

我尝试使用 Waypoints 库在我们滚动到 div 末尾时触发事件（按顺序实现类似“无限滚动”的功能）。我查看了这个示例，但如果我使用自定义可滚动“div”，它显然不起作用，它仅适用于窗口滚动。这是我的小提琴： http://jsfiddle.net/qa68m10n/6/

 var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('waypoint')
  },
  offset: 'bottom-in-view' 
})

我对吗？还有其他选择吗？

原文

I tryied to use the Waypoints library to fire an event when we scroll to the end of a div (in order to implement an "infinite scolling"-like functionality). I looked at this example but it apparently doesn't work if I use a custom scrollable 'div', it only works for the window scrolling. Here my fiddle: http://jsfiddle.net/qa68m10n/6/

 var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('waypoint')
  },
  offset: 'bottom-in-view' 
})

Am I right? Is there an alternative?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡水深流 2025-01-16 05:21:07

通过将上下文选项设置为可滚动元素，可以对路点执行此操作。

<div id="overflow-scroll">
  <div id="context-example">I am a waypoint with a custom context, the "#overflow-scroll" div.</div>
</div>

<script>
var waypoint = new Waypoint({
  element: document.getElementById('context-example'),
  handler: function() {
    console.log('Context example triggered')
  },
  context: document.getElementById('overflow-scroll')
})
</script>

http://imakewebthings.com/waypoints/api/context-option/

This is possible to do with Waypoints by setting the context option to the scrollable element.

<div id="overflow-scroll">
  <div id="context-example">I am a waypoint with a custom context, the "#overflow-scroll" div.</div>
</div>

<script>
var waypoint = new Waypoint({
  element: document.getElementById('context-example'),
  handler: function() {
    console.log('Context example triggered')
  },
  context: document.getElementById('overflow-scroll')
})
</script>

http://imakewebthings.com/waypoints/api/context-option/

回复收藏 0 原文

~没有更多了~