检查元素的一部分是否在视口中

Question

I am working on a Javascript code for checking if element is in viewport. But now I have a code that returns only true if the element is 100% in the viewport. Is there a way for example if there are 10 pixels returns true or if a percentage... of the element is in the viewport return true?

My code for so far

<script type="text/javascript">
    var elem = document.getElementById("result");
    var bounding = elem.getBoundingClientRect();
        if (bounding.top >= 0 && bounding.left >= 0 && bounding.right <= window.innerWidth && bounding.bottom <= window.innerHeight) {
            alert('in viewport');  
        }
</script>

Answer 1

Based on @Jorg's code, here's the same with the Intersection Observer API , which is a newer way of checking for intersections. This will work on all modern browsers ~ 93.5% according to Can I Use

This is set up to make it consider anything that's 50% within the viewport as within the threshold. I made it such a large value so it's easy to see how it works.

As you'll notice with this, the callback is only called at the threshold (after the initial check). So, if you want an accurate intersection percentage, you'll probably want to increase the number of thresholds checked.

 let callback = (entries, observer) => { entries.forEach(entry => { entry.target.style.backgroundColor = entry.isIntersecting ? 'green' : 'red'; entry.target.innerHTML = entry.intersectionRatio; }) } let observer = new IntersectionObserver(callback, { threshold: [0.5] // If 50% of the element is in the screen, we count it! // Can change the thresholds based on your needs. The default is 0 - it'll run only when the element first comes into view }); ['div1', 'div2', 'div3', 'div4'].forEach(d => { const div = document.getElementById(d); if (div) observer.observe(div); })

 html, body { padding: 0; margin: 0; } body { height: 200vh; width: 200vw; } #div1 { position: absolute; left: calc(100vw - 60px - 10px); top: 10px; height: 100px; width: 60px; background-color: red; color: white; } #div2 { position: absolute; left: 20px; top: 10px; height: 50px; width: 60px; background-color: blue; color: white; } #div3 { position: absolute; left: calc(100vw - 260px + 50px); top: max(calc(100vh - 350px + 120px), 120px); height: 350px; width: 260px; background-color: green; color: white; text-align: left; } #div4 { position: absolute; height: 9000px; width: 9000px; color: black; background-color: yellow; }

 <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <!-- enable this div to see an example of a div LARGER than your viewport. --> <!-- <div id="div4"></div> -->

Answer 2

I guess what you're looking for is the intersection between the element and the viewport? Meaning, find out how much of the div overlaps with the viewport.

Using the function below should tell you, between 0 and 1, how much of the DIV fits inside the viewport. Be aware though, that the div could also just be larger than the viewport this way, in which case the overlapping area is also less than 1.

Here is a working example

const intersection = (r1, r2) => {
  const xOverlap = Math.max(0, Math.min(r1.x + r1.w, r2.x + r2.w) - Math.max(r1.x, r2.x));
  const yOverlap = Math.max(0, Math.min(r1.y + r1.h, r2.y + r2.h) - Math.max(r1.y, r2.y));
  const overlapArea = xOverlap * yOverlap;

  return overlapArea;
}

const percentInView = (div) => {
  const rect = div.getBoundingClientRect();

  const dimension = { x: rect.x, y: rect.y, w: rect.width, h: rect.height };
  const viewport = { x: 0, y: 0, w: window.innerWidth, h: window.innerHeight };
  const divsize = dimension.w * dimension.h;
  const overlap = intersection(dimension, viewport);

  return overlap / divsize;
}