滚动加载,可视区域判断

发布时间:2021-01-07 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了滚动加载,可视区域判断前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

演示图

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

滚动加载,可视区域判断

CSS代码

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

总结


以上是前端之家为你收集整理的滚动加载,可视区域判断全部内容,希望文章能够帮你解决滚动加载,可视区域判断所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。