Element befindet sich vollständig im Viewport - Script anpassen

MrMurphy · 13. Februar 2021

In dem folgenden Script vom Kulturbanausen (Demo dazu) wird einem HTML-Element eine Klasse hinzugefügt, sobald es vollständig im Viewport (Browserfenster) ist. So können Scrolleffekte erzeugt werden.

Code

function isElementInViewport(element) {
 var rect = element.getBoundingClientRect();
 return (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
 rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 );
}

var elements = document.querySelectorAll(".mein-element");
 
function callbackFunc() {
 for (var i = 0; i < elements.length; i++) {
  if (isElementInViewport(elements[i])) {
 elements[i].classList.add("visible");
}

 /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
  else { 
   elements[i].classList.remove("visible");
  }
 }
}
 
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);

Alles anzeigen

Wie muss das Script geändert werden, damit die Klasse bereits hinzugefügt wird, wenn sich dass Element erst zu 20% im Viewport befindet?

AndreasB · 13. Februar 2021

Meinst du so in etwa?

https://codepen.io/Mr_Beer/pen/vYygZXy?editors=0011

JavaScript

function isElementInViewport(element, percent = 100) {
   const rect = element.getBoundingClientRect();
   const distanceThreshold = rect.height * (percent / 100);
   const isRectPartlyOffTop = rect.bottom - distanceThreshold >= 0;
   const isRectPartlyOffBottom = rect.top + distanceThreshold <= (window.innerHeight || document.documentElement.clientHeight);

   const rectIsInViewport =
      isRectPartlyOffTop &&
      isRectPartlyOffBottom &&
      rect.left >= 0 &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth);

   return rectIsInViewport;
}

var elements = document.querySelectorAll(".mein-element");

function callbackFunc() {
   for (var i = 0; i < elements.length; i++) {
      if (isElementInViewport(elements[i], 20)) {
         elements[i].classList.add("visible");
         console.log('show');
      } else {
         /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
         elements[i].classList.remove("visible");
         console.log('hide');
      }
   }
}

window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);

Alles anzeigen

um rechts links habe ich mich jetzt nicht gekümmert, kannst du aber gerne nachbessern.

MrMurphy · 13. Februar 2021

Danke, genau das war mein Ziel.

Mir geht es nur ums Rauf-/Runterscrollen. Wenn ein HTML-Element zum ersten mal beim Scrollen teilweise im Viewport (Browserfenster) erscheint soll einmalig eine bestimmte CSS-Anweisung ausgeführt werden.

Sempervivum · 13. Februar 2021

Das kann man sehr gut auch mit Intersection-Observer machen.

https://developer.mozilla.org/…Intersection_Observer_API

Demo:

HTML

<!DOCTYPE HTML>
<html>

<head>
    <title>Intersection-Observer</title>
    <style>
        body {
            width: 500vw;
            height: 500vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #testdiv {
            width: 60vw;
            height: 60vh;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div id="testdiv"></div>
    <script>
        const options = {
            rootMargin: '0px',
            threshold: 0.5
        }
        const callback = (entries, observer) => {
            entries.forEach(entry => {
                // Each entry describes an intersection change for one observed
                // target element:
                //   entry.boundingClientRect
                //   entry.intersectionRatio
                //   entry.intersectionRect
                //   entry.isIntersecting
                //   entry.rootBounds
                //   entry.target
                //   entry.time
                console.log(entry.isIntersecting);
            });
        };
        const observer = new IntersectionObserver(callback, options);
        const target = document.querySelector('#testdiv');
        observer.observe(target);
    </script>
</body>

</html>

Alles anzeigen

threshold gibt dabei den Grad der Überdeckung an.

MrMurphy · 13. Februar 2021

Danke, aber das Script passt wahrscheinlich nicht zu meinen Vorstellungen.

Sempervivum · 15. Februar 2021

Ist deine Entscheidung, aber das ist dann in etwa so als würden wir die Abmessungen unserer Container mit Javascript ausrechnen anstatt Flex oder Grid zu verwenden und den Browser das tun zu lassen

Element befindet sich vollständig im Viewport - Script anpassen

Jetzt mitmachen!

Teilen

Tags