如何判断一个元素在可视区域内（内含案例）

前端李易安

于 2024-10-02 12:30:00 发布

阅读量595

点赞数 11

分类专栏： javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/misstianyun/article/details/142677838

版权

javascript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

判断一个元素是否在可视区域中，可以使用JavaScript的 IntersectionObserver 或 getBoundingClientRect 方法。以下是两种常见的方式：

1. 使用 `getBoundingClientRect()` 方法

getBoundingClientRect() 返回元素相对于视口的大小和位置，然后通过检查元素的边界是否在可视区域内进行判断。

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

const element = document.querySelector('#my-element');
console.log(isElementInViewport(element));  // true or false

2. 使用 `IntersectionObserver` API

IntersectionObserver 允许在元素进入或离开视口时进行检测，并且可以自动触发回调函数，适合监听元素的可见性变化。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is in viewport!');
    } else {
      console.log('Element is out of viewport!');
    }
  });
});

const element = document.querySelector('#my-element');
observer.observe(element);

IntersectionObserver 更适合需要持续监控元素在视口中的状态变化的场景，而 getBoundingClientRect 则适用于一次性判断。

案例

下面是一个简单的JavaScript拖拽方块的案例，方块只能在浏览器的可视区域内移动：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽方块</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 50px;
      left: 50px;
      cursor: grab;
    }
  </style>
</head>
<body>
  <div id="box"></div>

  <script>
    const box = document.getElementById('box');
    let isDragging = false;
    let offsetX, offsetY;

    box.addEventListener('mousedown', (e) => {
      isDragging = true;
      offsetX = e.clientX - box.offsetLeft;
      offsetY = e.clientY - box.offsetTop;
      box.style.cursor = 'grabbing';
    });

    document.addEventListener('mousemove', (e) => {
      if (isDragging) {
        let newLeft = e.clientX - offsetX;
        let newTop = e.clientY - offsetY;

        // 限制方块在可视区域内
        newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - box.offsetWidth));
        newTop = Math.max(0, Math.min(newTop, window.innerHeight - box.offsetHeight));

        box.style.left = newLeft + 'px';
        box.style.top = newTop + 'px';
      }
    });

    document.addEventListener('mouseup', () => {
      isDragging = false;
      box.style.cursor = 'grab';
    });
  </script>
</body>
</html>

解释：

HTML：创建一个 div 元素作为拖拽方块。
CSS：设置方块的初始大小、位置以及鼠标手势。
JavaScript：
- mousedown：点击方块时开始拖拽，记录鼠标相对于方块的位置。
- mousemove：鼠标移动时更新方块的位置，但限制其只能在浏览器可视区域内移动。
- mouseup：鼠标松开时停止拖拽。

这个代码能确保方块在浏览器可视区内进行拖动，不会超出窗口边界。