演示图

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

代码

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

在页面制作的时候常用的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. java实现第五届蓝桥杯圆周率

    圆周率 数学发展历史上,圆周率的计算曾有许多有趣甚至是传奇的故事.其中许多方法都涉及无穷级数. 图1.png中所示,就是一种用连分数的形式表示的圆周率求法. 下面的程序实现了该求解方法.实际上数列的收 ...

  2. cuda 9.0

    https://docs.nvidia.com/cuda/archive/9.0/index.html cuda9.0工具包

  3. 20行Python代码开发植物识别 app

    这篇文章介绍如何用Python快速实现一个植物识别的app,家里养了几盆多肉还叫不上名字,正好拿来识别一下.实现这样一个app只需要20行左右的代码,先来看下效果: 另外,我也开发了微信小程序版本,大 ...

  4. zabbix通过Web场景监控URL

    选择主机添加应用集       添加Web监控 选在相应主机,并添加Web监控 按照方式新建Web场景 注意: 名称统一规则:相应的域名 应用集:选择之前创建的 或者 新建一个,名称为“URL 告警” ...

  5. 第一次使用Genymotion遇到的问题:for an unknown reson,VirtualBox DHCP has not assigned an IP address to virtual

    解决方案:http://www.aiuxian.com/article/p-554135.html

  6. 程序员实用JDK小工具归纳,工作用得到

    在JDK的安用装目录bin下,有一些有非常实用的小工具,可用于分析JVM初始配置.内存溢出异常等问题,我们接下来将对些常用的工具进行一些说明. JDK小工具简介 在JDK的bin目录下面有一些小工具, ...

  7. 使用PyQtGraph绘制数据滚动图形(3)

    import pyqtgraph as pg import numpy as np from pyqtgraph.Qt import QtGui, QtCore app = pg.QtGui.QApp ...

  8. js实现点击切换checkbox背景图片

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景 ...

  9. Flume-1.4.0和Hbase-0.96.0整合

    在使用Flume的时候,请确保你电脑里面已经搭建好Hadoop.Hbase.Zookeeper以及Flume.本文将以最新版的Hadoop-2.2.0.Hbase-0.96.0.Zookeeper-3 ...

  10. 其他函数-web_get_int_property

    用于记录http响应的信息.这个函数在调试脚本的常用,但是在实际压力测试中请将这些注释 使用这个函数可以获取到的信息有: 1.HTTP_INFO_RETURN_CODE:返回HTTP响应码 2.HTT ...