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

演示图

考虑2个情况

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

一种情况是,从头向下看的.

CSS代码

.ss li {

margin: 40px;

}

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

}

});

java 滚动加载,滚动加载,可视区域判断相关推荐

【懒加载】监听视图是否到达可视区域
前言功能参考饿了么的图片组件里的懒加载图片(地址) 想要实现在快滚动到底部的时候去动态加载图片,前面写到过的监听滚动条去做懒加载也可以做到,但是想用更优雅的写法来实现,即用本地占位图片来替换网络图片 ...
vue 实现数据滚动显示_vue 滚动加载数据
table数据多的时候打开页面会加载一会才显示数据,这样体验不好,所以要做滚动加载数据 {{eventMap[scope.row.eventId] == null ? '--': eventMap[s ...
超便捷好用的-圆形花瓣加载滚动图片插件spin.js
使用ajax异步请求时显示过渡的加载滚动图片是在常用不过的事情,接下来和大家分享这个插件. 样子示例:(只有这一个样子,可以动态设置显示大小.花半数.颜色等各项参数) 注:如果需要更绚丽样式的童鞋,请 ...
html5到底部自动加载,列表滚动到底部自动加载更多
列表滚动到底部自动加载更多在移动端,经常会用到列表滚动到底部,拉一下加载更多,或者点一下加载更多等等,今天我说说我的一个实现的思路. 通过监听列表的滚动时间,当用户滚动到列表的底部,并停留一小段时间 ...
Java 反射将配置文件数据加载到对象属性中
Java 反射将配置文件数据加载到对象属性中 Java 反射可以根据类名找到相应的类,也可以将配置文件中的值加载到对应属性中. 需要用到的包:spring-core-3.1.2.Release.ja ...
还在对java类、类的加载一知半解？这篇文章相信会解决你80%的困惑
目录什么是Class类 Class类的常用方法获取Class类的实例哪些类型可以有Class对象? 类加载内存分析类加载的过程类的加载与ClassLoader的理解什么时候会发生类初始化? ...
深入java虚拟机学习 -- 类的加载机制(续)
昨晚写深入java虚拟机学习 -- 类的加载机制都到1点半了,由于第二天还要工作,没有将上篇文章中的demo讲解写出来,今天抽时间补上昨晚的例子讲解. 这里我先把昨天的两份代码贴过来,重新看下: ...
java代码从编译到加载执行的过程
代码编译在刚接触java时,我们都知道通过javac命令将java源码文件编译成.class字节码文件,这是由编译器来完成的. 包括泛型擦除属于编译时期的语法糖. .class字节码文件是跨平台的, ...
java 根据类名示例化类_如何使用示例从Java中的类路径加载资源
java 根据类名示例化类 Java中的类路径不仅用于加载.class文件,而且还可以用于加载资源,例如属性文件,图像,图标,缩略图或任何二进制内容. Java提供了API来将这些资源读取为Input ...

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

java 滚动加载,滚动加载,可视区域判断相关推荐

最新文章

热门文章