當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2024/1/23 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 java 滚动加载,滚动加载,可视区域判断小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

演示圖

考慮2個(gè)情況

一種情況初始狀態(tài)下滾動(dòng)到在中間區(qū)域的時(shí)候,這時(shí)上半部分看不見的元素就不給字體添加紅色

一種情況是,從頭向下看的.

CSS代碼

.ss li {

margin: 40px;

}

const doct = window.document.documentElement;

const el = document.querySelectorAll("li");

window.addEventListener("scroll", () => {

el.forEach((v, i) => {

考慮2個(gè)情況 , 一種情況初始狀態(tài)下滾動(dòng)到在中間區(qū)域的時(shí)候,這時(shí)上半部分看不見的元素就不給字體添加紅色

一種情況是,從頭向下看的.

if (v.offsetTop > doct.scrollTop && v.offsetTop < doct.clientHeight + doct.scrollTop) {

v.style.color = "red";// 給可視區(qū)域元素添加紅色

}

});

以上是生活随笔為你收集整理的java 滚动加载,滚动加载,可视区域判断的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。