-1

I know you are going to refer me to this thread, but my question is a bit different and i want a pure JavaScript solution, no jquery or other library stuff.

I want to determine how much percent of each my div's are being displayed in viewport, when i scroll, i want something like this image :

enter image description here

here is my code below :

let VisibilityPercent = [];

const OnScroll = () => {

  Array.prototype.forEach.call(document.getElementsByClassName('mydiv'), function(element) {
    VisibilityPercent.push(GetVisibilityPercent(element));
  });

};

document.addEventListener("scroll", OnScroll);

const GetVisibilityPercent = (element) => {
  // The function that determines the visibility of element at current viewport
}

// So that VisibilityPercent would be something like this : [100%,100%,100%,100%,50%,0,0,0]
<div class="mydiv">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="mydiv">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="mydiv">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="mydiv">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="mydiv">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="mydiv">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="mydiv">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="mydiv">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Erfan Mola
  • 111
  • 1
  • 11
  • 1
    See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API. I believe the example there is what you want – j08691 Nov 04 '19 at 20:43
  • 1
    Can you specify what you're having trouble with, preferably in the form of a question? While you have provided a good amount of information, it isn't clear what you're asking; you've only told us what you want. Your code doesn't seem to show an attempt at achieving your goal, so I'm not sure which piece exactly you're asking about. – Tyler Roper Nov 04 '19 at 20:48
  • Can you replace the code at this page with my given function ? I don't really get much from that page, but yes there is an example of what i want – Erfan Mola Nov 04 '19 at 20:49
  • 1
    Just like the previous question, you're asking us to write an algorithm for you - StackOverflow is not a code writing service. This question is too broad. Try to write the code yourself then come back with where you need help. – skyline3000 Nov 04 '19 at 20:51
  • Tyler Roper, i want to build a pure JS ScrollSpy so i need to know which element is being displayed the most in the screen, so that i can detect what to do – Erfan Mola Nov 04 '19 at 20:52
  • 1
    @ErfanMola I understand your *goal*. But what are you *asking*? "I want to build..." - so what do you need help with? Right now it sounds like you're asking *us* to build it. It's expected you've made a reasonable effort and have a specific question. – Tyler Roper Nov 04 '19 at 20:53

1 Answers1

0

I Solved the issue using the function below :

const GetVisibilityPercent = (element) => {

    let observer = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach(entry => {
                let percent = (Math.floor(entry.intersectionRatio * 100)) + "%";
            });
        },
        {
            root: null,
            rootMargin: '0px',
            threshold: 1.0
        }
    );

    observer.observe(element);

};
Erfan Mola
  • 111
  • 1
  • 11