演示图

考虑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. });

在页面制作的时候常用的html页面滚动加载,可视区域判断方法的更多相关文章

  1. ios单独的页面支持横竖屏的状态调整,HTML5加载下(更新2)

    单独的页面支持横竖屏的状态调整,HTML5加载下 工程中设置只支持竖屏状态,在加载HTML5的界面可以是横竖屏的,在不对工程其他界面/设置做调整的同时,可以这样去 #import "View ...

  2. 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  3. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  4. 不想分页怎么办??-->页面数据的滚动加载

    在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...

  5. h5页面列表滚动加载数据

    h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...

  6. webbrower判断页面是否加载完成的好方法

    public void WaitPageCompleted(int timeOutSec) { ; ; j < timeOutSec * ; j++) { _wb.Invoke(new Acti ...

  7. JQM 页面滚动加载

    1 应用场景:文章比较长,只加载部分,当到页面底部触发获取更多数据. 2 如图,监听滚动条的位置,触发事件,转化为求X的长度, 3 实例代码: //滚动条到底加载更多 $(document).on(& ...

  8. 使用Ajax.ActionLink时,点击对应的按钮会重新加载一个页面,而不是在当前页面的指定模块加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Grunt-几个常用的任务配置,加载,执行的写法

    http://www.gruntjs.net/sample-gruntfile Gruntfile 实例 下面就针对一个 Gruntfile 案例做简单分析,也可以作为一个实例使用: module.e ...

随机推荐

  1. 详解SpringBoot(2.3)应用制作Docker镜像(官方方案)

    关于<SpringBoot-2.3容器化技术>系列 <SpringBoot-2.3容器化技术>系列,旨在和大家一起学习实践2.3版本带来的最新容器化技术,让咱们的Java应用更 ...

  2. Java编程技术之浅析JVM内存

    JVM JVM->Java Virtual Machine:Java虚拟机,是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. 基本认知: ...

  3. Python 导入CSV、JSON、XML数据

    常见的机器可读格式包括: - 逗号分隔值(Comma-Separated Values,CSV)- 制表符分隔值(tab-separated values,TSV)- JavaScript 对象符号( ...

  4. 关于一个服务和api监控的界面,涉及ajax-jsonp,promise应用

    <!DOCTYPE html> <html class="mobile hairline" data-dpr=""> <head& ...

  5. 【JAVA进阶架构师指南】之五:JVM性能调优

    前言   首先给大家说声对不起,最近属实太忙了,白天上班,晚上加班,回家还要收拾家里,基本每天做完所有事儿都是凌晨一两点了,没有精力再搞其他的了.   好了,进入正题,让我们来聊聊JVM篇最后一个章节 ...

  6. [AHOI2017/HNOI2017]单旋

    题目   点这里看题目. 分析   最妙的地方在于,这道题其实是用一种数据结构模拟另一种数据结构!   我们需要维护深度和树的结构,以下对于每个操作进行分别讨论. 插入一个新节点   可以发现,这个新 ...

  7. centos 8分区方案

    https://www.cnblogs.com/yogurtwu/p/10717001.html https://zhuanlan.zhihu.com/p/126308255 常见目录解释 Linux ...

  8. 安装allure测试报告

    必须安装jdk1.8,配置环境变量 一.环境准备 Windows10 jdk-9.0.1 二.下载并安装JDK 到Java的官网下载JDK安装包,地址:http://www.oracle.com/te ...

  9. 囚徒问题(100 prisoners problem)的python验证

    密码学课上老师介绍了这样一个问题,囚徒问题(100 prisoners problem):一百个囚徒被关在牢房里,典狱长给他们最后一次机会,100人依次进入一个有100个抽屉的牢房,每个抽屉置乱放入1 ...

  10. Bestcoder Round8

    4989Summary 既然用C++了就偷懒直接用STL大法了 #include<iostream> #include<algorithm> #include<vecto ...