JS判断指定dom元素是否在屏幕内的方法实例

JS判断指定dom元素是否在屏幕内的方法实例可以通过以下步骤来完成：

1. 获取屏幕高度和滚动距离

使用window.innerHeight属性获取屏幕高度，使用window.scrollY属性获取页面滚动的距离，代码如下：

const screenHeight = window.innerHeight;
const scrollDistance = window.scrollY;

2. 获取指定元素的位置和高度

使用Element.getBoundingClientRect()方法获取指定元素相对于视口的位置和大小，代码如下：

const element = document.getElementById('your-element-id');
const elementTop = element.getBoundingClientRect().top + scrollDistance;
const elementBottom = elementTop + element.offsetHeight;

其中，elementTop表示指定元素顶部相对于视口顶部的距离，需加上滚动距离得到实际距离。elementBottom表示指定元素底部相对于视口顶部的距离，需加上元素高度和滚动距离得到实际距离。

将以上两个步骤合并，得到完整的判断页面元素是否在屏幕内的方法：

function checkElementInScreen(elementId) {
  const element = document.getElementById(elementId);
  const screenHeight = window.innerHeight;
  const scrollDistance = window.scrollY;
  const elementTop = element.getBoundingClientRect().top + scrollDistance;
  const elementBottom = elementTop + element.offsetHeight;
  if (elementTop < screenHeight && elementBottom > 0) {
    return true;
  } else {
    return false;
  }
}

示例说明

以下是两个示例说明：

示例一

假设页面上有一个id为"example"的元素，在用户滚动页面时需要判断它是否在屏幕内，并根据判断结果执行不同操作，代码如下：

window.addEventListener('scroll', function() {
  if (checkElementInScreen('example')) {
    // 在屏幕内
    // 执行相关操作
  } else {
    // 不在屏幕内
    // 执行其他操作
  }
});

示例二

假设页面上有一组id为"items"的相同元素，在用户滚动页面时需要判断每个元素是否在屏幕内，并根据判断结果改变元素样式，代码如下：

function changeItemStyle() {
  const items = document.querySelectorAll('#items');
  items.forEach((item) => {
    if (checkElementInScreen(item.id)) {
      item.style.backgroundColor = 'red';
      item.style.color = 'white';
    } else {
      item.style.backgroundColor = 'white';
      item.style.color = 'black';
    }
  });
}

window.addEventListener('scroll', changeItemStyle);

在滚动页面时，每个元素的样式会根据是否在屏幕内而改变。