java 滚动加载,滚动加载,可视区域判断

演示图

考虑2个情况

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

一种情况是,从头向下看的.

CSS代码

.ss li {

margin: 40px;

}

• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss
• sss

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";// 给可视区域元素添加红色

}

});

});