Javascript 滚动百分比跟踪：如何确保没有断点丢失？

我一直在使用

setInterval（）

，每1s运行一次以检查已滚动页面的百分比，断点分别为25%、50%、75%。和100%的

document.body.clientHeight

。我发现这种方法可以像预期的那样工作，但有时会丢失断点，具体取决于用户滚动的速度。最常见的情况是，50%和75%的断点不会被触发

var breakpoints = [0, 0, 0, 0];
var myEvents;
var runOnScroll = setInterval(function() {

    var h = document.documentElement;
    var b = document.body;
    var st = 'scrollTop';
    var sh = 'scrollHeight';
    var scrollPct = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
    var totalHeight = document.body.clientHeight;
    var visibleHeight = window.innerHeight;

    if (scrollPct >= 25 && scrollPct < 50) {
        breakpoints[0] += 1;
        if (breakpoints[0] === 1) {
            myEvents = 'event203';
            interactionLog('scroll breakpoint: 25%');
        }
    } else if (scrollPct >= 50 && scrollPct < 75) {
        breakpoints[1] += 1;
        if (breakpoints[1] === 1) {
            myEvents = 'event204';
            interactionLog('scroll breakpoint: 50%');
        }
    } else if (scrollPct >= 75 && scrollPct < 100) {
        breakpoints[2] += 1;
        if (breakpoints[2] === 1) {
            myEvents = 'event205';
            interactionLog('scroll breakpoint: 75%');
        }
    } else if (scrollPct === 100) {
        breakpoints[3] += 1;
        if (breakpoints[3] === 1) {
            myEvents = 'event206';
            interactionLog('scroll breakpoint: 100%');
            // clearInterval once 100% of page is seen
            clearInterval(runOnScroll);
        }
    }
}, 1000);

var断点=[0,0,0,0]；
髓鞘变种；
var runOnScroll=setInterval（函数（）{
var h=document.documentElement；
var b=document.body；
var st='scrollTop'；
var sh='scrollHeight'；
var scrollPct=（h[st]| b[st]）/（h[sh]| b[sh]）-h.clientHeight）*100；
var totalHeight=document.body.clientHeight；
var visibleHeight=window.innerHeight；
如果（scrollPct>=25&&scrollPct<50）{
断点[0]+=1；
if（断点[0]==1）{
myEvents='event203'；
interactionLog（'滚动断点：25%）；
}
}否则如果（scrollPct>=50&&scrollPct<75）{
断点[1]+=1；
if（断点[1]==1）{
myEvents='event204'；
interactionLog（'滚动断点：50%）；
}
}否则如果（scrollPct>=75&&scrollPct<100）{
断点[2]+=1；
if（断点[2]==1）{
myEvents='event205'；
interactionLog（'滚动断点：75%）；
}
}否则如果（滚动PCT==100）{
断点[3]+=1；
if（断点[3]==1）{
myEvents='event206'；
interactionLog（'scroll断点：100%”）；
//clearInterval一次显示100%的页面
净距（转轮）；
}
}
}, 1000);

我已经尝试将时间间隔减少到0.5s，因为很明显1s的时间间隔不适合快速滚动，但是时间间隔越短，断点仍然会丢失

---

确保不遗漏断点的最佳方法是什么？

实现这一点的更好方法（不使用和间隔）是禁用窗口滚动事件。脚本将只记录一次

断点中定义的百分比。然后，当达到所有断点目标时，将删除滚动事件


//变量
var断点=[25,50,75,100]；
函数检查断点（事件）{
//变量声明
var totalscroll=document.documentElement.offsetHeight-window.innerHeight，//总可滚动区域
currentscroll=document.documentElement.scrollTop，//当前滚动
百分比=Math.ceil（（currentscroll*100）/totalscroll），//百分比滚动
索引=断点。indexOf（百分比）；
//如果在断点中定义了百分比，或已达到最近（较低）的断点
如果（索引>=0）{
// (:
console.log（百分比+'%reated！'）；
//删除目标断点
断点。拼接（索引，1）；
//如果没有更多的目标要实现，则删除该事件
如果（断点长度==0）{
removeEventListener（'scroll'，checkBreakpoint）；
}
}
}
//将函数绑定到窗口滚动事件
window.addEventListener（'scroll'，checkBreakpoint，false）；
为什么不直接使用滚动事件？