面试：判断元素进入视口viewport

最新推荐文章于 2024-07-19 12:58:53 发布

啃火龙果的兔子

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量4w

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_43592064/article/details/130885395

版权

常用的方式有两种

1）、图片距离顶部距离 < 视窗高度 + 页面滚动高度（不推荐）

imgEle.offsetTop < window.innerHeight + document.body.scrollTop

2）getBoundingClientRect （很舒服的一个API）

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

  function isInViewport(ele) {
    // 元素顶部 距离 视口左上角 的距离top <= 窗口高度 （反例：元素在屏幕下方的情况）
    // 元素底部 距离 视口左上角 的距离bottom > 0 (反例：元素在屏幕上方的情况)
    // 元素display样式不为none
    const notBelow = ele.getBoundingClientRect().top <= window.innerHeight ? true : false;
    const notAbove = ele.getBoundingClientRect().bottom >= 0 ? true : false;
    const visable = getComputedStyle(ele).display !== "none" ? true : false;
    return notBelow && notAbove && visable ? true : false;
  }

3）Intersection Observer（存在兼容性问题）