add class when element in viewport vanilla javascript

code fighter answered on December 27, 2020 Popularity 7/10 Helpfulness 6/10

answer add class when element in viewport vanilla javascript

related add class when element in viewport vanilla javascript

add class when element in viewport vanilla javascript

Comment

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;
    }
}

Popularity 7/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: add class element javascript viewport when

Link to this answer
Share Copy Link

Contributed on Dec 27 2020

code fighter

0 Answers Avg Quality 2/10

Closely Related Answers

add class when element in viewport vanilla javascript

Comment

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

Popularity 7/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: add class element

Link to this answer
Share Copy Link

Contributed on Dec 27 2020

code fighter

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

add class when element in viewport vanilla javascript

Contents

More Related Answers

add class when element in viewport vanilla javascript

Closely Related Answers

add class when element in viewport vanilla javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.