Breaking News: Grepper is joining You.com. Read the official announcement!

Element in viewport or not ?

Apalov answered on August 13, 2021 Popularity 8/10 Helpfulness 5/10

answer Element in viewport or not ?

related js element in viewport

Element in viewport or not ?

Comment

function isElementInViewport (el) {

    // Special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
    );
}

Popularity 8/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: element javascript viewport

Link to this answer
Share Copy Link

Contributed on Aug 13 2021

Apalov

0 Answers Avg Quality 2/10

Closely Related Answers

js element in viewport

Comment

function inViewport(selector) {
    const offset = 10; // controll
    const element = selector.getBoundingClientRect();
    const elementTop = Math.round(element.top) + offset;
    const elementBottom = Math.round(element.bottom);

    return elementTop <= window.innerHeight && elementBottom >= 0
}

const ele = doucument.querySelector('.div');

console.log(inViewport(ele)) // result: true (is visiable)

Popularity 6/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: viewport javascript element javascr

Link to this answer
Share Copy Link

Contributed on Apr 29 2024

Don't touch

0 Answers Avg Quality 2/10

Element in viewport or not ?

Contents

More Related Answers

Element in viewport or not ?

Closely Related Answers

js element in viewport

Grepper

Documentation

Social

Legal

Contact

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