How do I track scroll depth?

Capturing how far users scroll on your website is important to see if users are viewing all of the content on a page. The JavaScript example below measures the full length of a page, and then fires a custom Scroll Depth event by triggering Freshpaint’s client-side freshpaint.track() API every time a user scrolls a 25% of the full length (25%, 50%, 75%, 100%).

Scroll depth is calculated on the scroll location within the body element. If the content on your website is contained within a container element, then this event will not fire as expected.

(function() {
var quarters = 0;
var scrollHeight, quarterHeight, scrollDistance, divisible, scrollPercent;
document.addEventListener("scroll", function() {
scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
quarterHeight = scrollHeight / 4;
scrollDistance = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
divisible = Math.trunc(scrollDistance / quarterHeight);
if (quarters < divisible && divisible !== Infinity) {
scrollPercent = divisible * 25;
freshpaint.track('Scroll Depth', {
percent: scrollPercent
});
quarters++;
}
});
}());