“Dodaj klasę, gdy element w Viewport Vanilla JavaScript” Kod odpowiedzi

Dodaj klasę, gdy element w Viewport Vanilla JavaScript

window.addEventListener('scroll', function (event) {
    if (isInViewport(theElementToWatch)) {
      // update the element display
    }
}, false);
code fighter

Dodaj klasę, gdy element w Viewport Vanilla JavaScript

function isInViewPort(element) {
    // Get the bounding client rectangle position in the viewport
    var bounding = element.getBoundingClientRect();

    // Checking part. Here the code checks if it's *fully* visible
    // Edit this part if you just want a partial visibility
    if (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    ) {
        console.log('In the viewport! :)');
        return true;
    } else {
        console.log('Not in the viewport. :(');
        return false;
    }
}
code fighter

Odpowiedzi podobne do “Dodaj klasę, gdy element w Viewport Vanilla JavaScript”

Pytania podobne do “Dodaj klasę, gdy element w Viewport Vanilla JavaScript”

Więcej pokrewnych odpowiedzi na “Dodaj klasę, gdy element w Viewport Vanilla JavaScript” w JavaScript

Przeglądaj popularne odpowiedzi na kod według języka

Przeglądaj inne języki kodu