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

how to detect if a particular html element is on viewport or not using javascript

Vandana Giri answered on November 9, 2022 Popularity 7/10 Helpfulness 3/10

answer how to detect if a particular html element is on viewport or not using javascript

related how to check if element is in viewport javascript

how to detect if a particular html element is on viewport or not using javascript

Comment

// The following function can be used to check if an element is in the viewport or not if the element is in the viewport this function will return true else it will return false
// this function is taken from: https://www.javascripttutorial.net/dom/css/check-if-an-element-is-visible-in-the-viewport/
function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: detect element html javascript using viewport

Link to this answer
Share Copy Link

Contributed on Nov 09 2022

Vandana Giri

0 Answers Avg Quality 2/10

Closely Related Answers

how to check if element is in viewport javascript

Comment

function elementInViewport(el) {
  let top = el.offsetTop;
  let left = el.offsetLeft;
  let width = el.offsetWidth;
  let height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: element

Link to this answer
Share Copy Link

Contributed on Nov 09 2022

Vandana Giri

0 Answers Avg Quality 2/10

how to detect if a particular html element is on viewport or not using javascript

Contents

More Related Answers

how to detect if a particular html element is on viewport or not using javascript

Closely Related Answers

how to check if element is in viewport javascript

Grepper

Documentation

Social

Legal

Contact

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