Percentage of scroll completeness of a div

Question

Similar, but not exactly like this other question, I want to know the percentage of scroll "lifecycle" of any given div inside a scrollable document.

In other words:

When the top edge of the div is aligned with the bottom edge of the visible viewport, it's 0%
When the bottom edge of the div is aligned with the top edge of the visible viewport, it's 100%
If the div is below the visible viewport, it always remains 0%
If the div is above the visible viewport, it always remains 100%

I tried adapting the solution from that other question, as well as a plugin like this; however in both of these cases the percentage decreases once the div begins scrolling out of view at the top of the viewport, which is not what I want.

I've attempted to do the maths on my own in this JSFiddle, but haven't been very successful: https://jsfiddle.net/5h3tdmb4/

var pct = (window.scrollY + window.innerHeight <= target.offsetTop) ? 0 : (window.scrollY + window.innerHeight) / (target.offsetTop + target.offsetHeight - window.scrollY);

How can the above calculation be achieved in vanilla JavaScript?

@EinarÓlafsson This is as far as I've gotten: https://jsfiddle.net/5h3tdmb4/ — Emphram Stavanger, Aug 15 '19 at 15:55
You should make the code part of your question rather than on a 3rd service, like jsFiddle, to keep everything in one place :) You can create a code snipped. — Einar Ólafsson, Aug 15 '19 at 15:57
did you try intersection observer as mentioned in the first article? — James South, Aug 15 '19 at 16:41

score 1 · Accepted Answer · answered Aug 15 '19 at 16:54

This should be it Jsfiddle... i just fixed the maths and changed how the pecentage was getting calculated :

document.addEventListener("scroll", function(){
var target = document.getElementById("target");
var itemLength = (window.scrollY + window.innerHeight) <= target.offsetTop 
  ? 0 
  : ((window.scrollY + window.innerHeight) - target.offsetTop) <= (window.innerHeight + target.offsetHeight)
  ? (window.scrollY + window.innerHeight - target.offsetTop)
  : (window.innerHeight + target.offsetHeight)

  var percentage = Math.round((itemLength * 100) / (window.innerHeight + target.offsetHeight))
  /* Show in DOM */
  document.getElementById("pct").innerHTML =  percentage + "%";
});

Great, that's exactly what I was looking for! Thank you! – Emphram Stavanger Aug 16 '19 at 08:50 — Emphram Stavanger, Aug 16 '19 at 08:50

Percentage of scroll completeness of a div

1 Answers1