javascript 在视口#viewport中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 在视口#viewport中相关的知识,希望对你有一定的参考价值。

//fully

const isInViewport = (el) => {

  var rect = el.getBoundingClientRect();

  return {
    y: rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight),
    x: rect.left >= 0 && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  }

}


//partial

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

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

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

以上是关于javascript 在视口#viewport中的主要内容,如果未能解决你的问题,请参考以下文章

移动web开发之视口viewport

移动web开发之视口viewport

移动前端中viewport(视口)

流式布局和viewport

浅谈移动端中的视口(viewport)

ViewPort视口