zoukankan      html  css  js  c++  java
  • 在页面制作的时候常用的html页面滚动加载,可视区域判断方法

    演示图

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

    代码

     1 .ss li {
     2   margin: 40px;
     3 }
     4 <div class="ss">
     5             <ul>
     6                 <li>sss</li>
     7                 <li>sss</li>
     8                 <li>sss</li>
     9                 <li>sss</li>
    10                 <li>sss</li>
    11                 <li>sss</li>
    12                 <li>sss</li>
    13                 <li>sss</li>
    14                 <li>sss</li>
    15                 <li>sss</li>
    16                 <li>sss</li>
    17                 <li>sss</li>
    18                 <li>sss</li>
    19                 <li>sss</li>
    20                 <li>sss</li>
    21                 <li>sss</li>
    22                 <li>sss</li>
    23                 <li>sss</li>
    24                 <li>sss</li>
    25                 <li>sss</li>
    26                 <li>sss</li>
    27             </ul>
    28         </div>
     1 const doct = window.document.documentElement;
     2 const el = document.querySelectorAll("li");
     3 window.addEventListener("scroll", () => {
     4       el.forEach((v, i) => {
     5           /*
     6             考虑2个情况 , 一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色
     7             一种情况是,从头向下看的.
     8            */
     9 // 
    10           if (v.offsetTop > doct.scrollTop && v.offsetTop < doct.clientHeight + doct.scrollTop) {
    11                         v.style.color = "red";// 给可视区域元素添加红色
    12           }
    13      });
    14 });
  • 相关阅读:
    javascript深入理解js闭包
    hibernate 之 sql查询
    MongoDB 2.4企业版分析
    MongoDB 连接池
    GridFS实现原理
    MongoVUE破解
    mongodb 官方 手册
    mongodb的一些性能管理工具
    Python: names, values, assignment and mutability
    使用 mock 测试
  • 原文地址:https://www.cnblogs.com/ypppt/p/12883881.html
Copyright © 2011-2022 走看看