Question

我一直在使用setInterval()，每1秒运行一次，检查已滚动页面的百分比，断点为25％，50％，75％。和document.body.clientHeight的100％。我发现这种方法按预期工作，但有时会丢失断点，具体取决于用户滚动的速度。最常见的是，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);

我已经尝试将间隔时间缩短到0.5秒，因为很明显1s间隔不能适应快速滚动 - 但是间隔时间较短时仍会遗漏断点。

确保断点不被错过的最佳方法是什么？

Answer 1

实现这一目标的更好方法（使用和间隔的内容）是对窗口滚动事件的反应。该脚本仅记录breakpoints中定义的百分比一次。然后，当达到所有断点目标时，将删除滚动事件。

// Variables
var breakpoints = [25, 50, 75, 100];

function checkBreakpoint(event) {
	
	// Variable declaration
	var totalscroll   = document.documentElement.offsetHeight - window.innerHeight, // Total scrollable area
		currentscroll = document.documentElement.scrollTop, // Current scroll
		percentage    = Math.ceil((currentscroll * 100) / totalscroll), // Percentage scrolled
		index         = breakpoints.indexOf(percentage);
	
	// If the percentage is defined in breakpoints or the closest (lower) breakpoint has been reached
	if(index >= 0) {
		
		// (:
		console.log(percentage + '% reached!');
		
		// Removes th breakpoint goal
		breakpoints.splice(index, 1);
		
		// If no more goals to achieve, remove the event
		if(breakpoints.length == 0) {
			window.removeEventListener('scroll', checkBreakpoint);
		}
		
	}
	
}

// Bind the function to the window scroll event
window.addEventListener('scroll', checkBreakpoint, false);

<div style="height: 2000px"></div>

滚动百分比跟踪：如何确保不会错过任何断点？

1 个答案: