摘要 今天小编跟大家讲解下有关html页面滚动加载,可视区域判断 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html页面滚动加载,

今天小编跟大家讲解下有关html页面滚动加载,可视区域判断 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html页面滚动加载,可视区域判断 的相关资料，希望小伙伴们看了有所帮助。

演示图

考虑2个情况一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色一种情况是,从头向下看的.

代码.ss li { margin: 40px;}<div class="ss"> <ul> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> <li>sss</li> </ul> </div>const doct = window.document.documentElement;const el = document.querySelectorAll("li");window.addEventListener("scroll", () => { el.forEach((v, i) => { /* 考虑2个情况 , 一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色 一种情况是,从头向下看的. */// if (v.offsetTop > doct.scrollTop && v.offsetTop < doct.clientHeight + doct.scrollTop) { v.style.color = "red";// 给可视区域元素添加红色 } });});

来源：爱蒂网