JavaScript动态设置浏览器可视区域元素的文字颜色、监听滚动条、querySelectorAll、getBoundingClientRect

---

前言

当元素出现在浏览器可视区域时给元素设置颜色等其他操作，比如当元素进入浏览器可视区域时，设置元素进入动画。

---

html

<div id="idBox" class="box"></div>

---

JavaScript

let obj = {
    
    
    idElList: [],
    idEl: [],
    id: 'id_'
};

init();
async function init() {
    
    
    let el = '';

    for (let i = 0; i < 10; i++) {
    
    
        el += `<div id="${
      
      obj.id}${
      
      i}" class="item w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 ${
      
      i !== 0 ? 'm_t_20' : ''}">${
      
      i}</div>`;
    }

    el += '<div id="ida" class="item w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 m_t_20">10</div>';
    el += '<div id="idb" class="item w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 m_t_20">11</div>';
    el += '<div id="idc" class="item w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 m_t_20">12</div>';

    idBox.innerHTML = el;

    await querySelectorAllId();
    getVisibleElementIds();
}

function querySelectorAllId() {
    
    
    let idElList = document.querySelectorAll('*');

    obj.idElList = idElList;

    idElList.forEach(item => {
    
    
        if (item.id) obj.idEl.push(item.id);
    });
}

function getVisibleElementIds() {
    
    
    let elId = [];

    obj.idElList.forEach(item => {
    
    
        const rect = item.getBoundingClientRect();

        // 检查元素是否在可视区域内
        if (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
            item.id
        ) elId.push(item.id);
    });

    elId = elId.filter(item => item.indexOf(obj.id) !== -1);

    for (let i = 0; i < obj.idEl.length; i++) {
    
    
        let id = obj.idEl[i],
            idBox = document.getElementById(id);

        idBox.style.color = `#${
      
      elId.includes(id) ? 'ff0000' : '333333'}`;
    }
}

// 监听滚动事件
window.addEventListener('scroll', () => getVisibleElementIds());

---

querySelectorAll

MDN

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是NodeList 。

---

W3SCHOOL

querySelectorAll()方法返回与指定CSS选择器匹配的元素的子元素的集合，以静态NodeList对象。
NodeList是类数组的节点集合（列表）。
列表中的节点可以通过索引（下标）访问。索引从0开始。
length属性可返回列表中的节点数。

---

getBoundingClientRect

w3school

getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
getBoundingClientRect()方法返回的是拥有八个属性的DOMRect对象：
left
top
right
bottom
x
y
width
height
提示：已经完成的滚动也算在内。这意味着每次滚动位置更改时，矩形的边缘（top、left、bottom以及right）都会更改其值。

---

MDN

Element.getBoundingClientRect()方法返回一个DOMRect对象，其提供了元素的大小及其相对于视口的位置。