Question

我正在寻找一个用纯JavaScript编写的解决方案，它在页面滚动的某个百分比（例如80％）中触发JS函数。我希望完成类似于Waypoints的工作，没有750行代码或使用jQuery。

我假设我会确定窗口的高度，然后在滚动点大于高度的80％时触发回调。

这里的其他要求是我只希望它触发一次。我所关注的另一个问题是不断轮询滚动百分比的潜在性能问题。这是一个有效的问题吗？

Answer 1

您可以使用onscroll

function trigerScroll（ev）{ if（window.pageYOffset＆gt; 400）提醒（＆＃39;用户滚动至少400像素！＆＃39;）; } window.onscroll = trigerScroll;

编辑：

你可以像这样获得文件高度

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

来源：How to get height of entire document with JavaScript?

Answer 2

一种在滚动时每500ms检查一次页面滚动的方法，并且只运行一次：

＆＃13;

var throttledListener = throttle(scrollListener, 500);
window.addEventListener('scroll', throttledListener);

function throttle(func, delay) { // allows [func] to run once every [delay] ms
    var func = func.bind(func),
        last = Date.now();
    return function() {
        if (Date.now() - last > delay) {
            func();
            last = Date.now();
        }
    }
}
function scrollListener() {
    console.log('scrolled');
    var threshold = document.body.clientHeight * 0.6;
    if (window.pageYOffset >= threshold) {
        alert('user scrolled to threshold; listener removed');
        window.removeEventListener('scroll', throttledListener);
    }
}

＆＃13;

<div style="height:2000px;width:100%">tall div</div>

＆＃13;

如何在滚动条达到页面高度的某个百分比时触发JavaScript函数

2 个答案: