Waypoints 库的滚动百分比

Question

我的用例是我需要检测用户何时阅读到页面的 20%、40% 等。

然而，该库的工作方式似乎有所不同，因为它会检测某个 DOM 元素何时进入视图，而不管其滚动深度如何。

如何让它做我需要的事情？

Answer 1

查看文档http://imakewebthings.com/waypoints/api/offset-option/

要检测页面位置，您可以将 Waypoint 附加到页面的包装纸上。我的意思是您的页面的父元素将包含页面内容（它将是您页面的 100% 高度）：

<body>
    <div id="wrapper">
          page content...
    </div>
</body>

然后根据文档，您可以使用 "offset" 来实现您的需要。您可以将 Waypoint 附加到 "wrapper" 并使用偏移量获取百分比来检测用户滚动的距离。

var waypoint = new Waypoint({
    element: document.getElementById('wrapper'),
    handler: function(direction) {
         alert('50% past the top')
    },
    offset: '-50%'
})

Waypoints 库的滚动百分比

Scroll percentage with Waypoints library

javascript

jquery

jquery-waypoints