判断元素A是否在元素B的可视范围内

作者: 在小白的路上越走越远 | 来源:发表于2020-12-14 16:35 被阅读0次

判断元素是否在可视范围内或是否滚动到底部
jquery判断元素是否在可视区域范围内
jquery判断元素是否在可视区域范围内
jquery懒加载、回到顶部
js判断获取元素是否在可视区域
Scrublet
懒加载
懒加载+木桶布局
懒加载
懒加载实例

结构如下：

    <div id="container">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
    </div>

判断方法：

    function position(element) {
      elementOffsetTop = element.offsetTop - container.offsetTop;
      // 在上方
      isTop = container.scrollTop > divOffsetTop + element.clientHeight;
      // 在下方
      isBottom = container.scrollTop < divOffsetTop - container.clientHeight;

      if (isTop || isBottom) {
          console.log("消失");
        } else {
          console.log("出现");
      }
    }

完整代码参考：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        height: 500px;
        width: 300px;
        overflow-y: scroll;
        background-color: aqua;
      }
      .div1,
      .div2,
      .div3,
      .div4 {
        height: 400px;
        width: 280px;
        /* border: 1px solid springgreen; */
        margin-top: 20px;
      }

      .div1 {
        background-color: violet;
      }
      .div2 {
        background-color: #fff;
      }
      .div3 {
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <button>定位</button>
    <div id="container">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
    </div>
  </body>
  <script>
    const container = document.querySelector("#container");

    const div1 = document.querySelector(".div1");
    const div2 = document.querySelector(".div2");
    const div3 = document.querySelector(".div3");
    const div4 = document.querySelector(".div4");

    const button = document.querySelector("button");
    button.addEventListener("click", () => {
      // 如果div1在可视范围内，按钮没反应，否则有反应
        console.log(document.querySelectorAll("#container>div")[1])
      position(div3)
    });

    function position(element) {
      // 获取container的可视范围
      console.log('container.clientHeight',container.clientHeight);

      // 获取元素的高度
      console.log('element.clientHeight',element.clientHeight);

      // 获取元素的偏移距离
      divOffsetTop = element.offsetTop - container.offsetTop;
      console.log('divOffsetTop',divOffsetTop);

      // 页面滚动的距离
      console.log(container.scrollTop);

      // 在上方
      let isTop = container.scrollTop > divOffsetTop + element.clientHeight;

      // 在下方
      let isBottom = container.scrollTop < divOffsetTop - container.clientHeight;
      if (isTop || isBottom) {
          container.scrollTop = divOffsetTop
          console.log("消失");
        } else {
          console.log("出现");
        
      }
    }
  </script>
</html>