在页面制作的时候常用的html页面滚动加载,可视区域判断方法
演示图
考虑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页面滚动加载,可视区域判断方法的更多相关文章
- ios单独的页面支持横竖屏的状态调整,HTML5加载下(更新2)
单独的页面支持横竖屏的状态调整,HTML5加载下 工程中设置只支持竖屏状态,在加载HTML5的界面可以是横竖屏的,在不对工程其他界面/设置做调整的同时,可以这样去 #import "View ...
- 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)
新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...
- 移动设备的HTML页面中图片实现滚动加载
如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...
- 不想分页怎么办??-->页面数据的滚动加载
在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...
- h5页面列表滚动加载数据
h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...
- webbrower判断页面是否加载完成的好方法
public void WaitPageCompleted(int timeOutSec) { ; ; j < timeOutSec * ; j++) { _wb.Invoke(new Acti ...
- JQM 页面滚动加载
1 应用场景:文章比较长,只加载部分,当到页面底部触发获取更多数据. 2 如图,监听滚动条的位置,触发事件,转化为求X的长度, 3 实例代码: //滚动条到底加载更多 $(document).on(& ...
- 使用Ajax.ActionLink时,点击对应的按钮会重新加载一个页面,而不是在当前页面的指定模块加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Grunt-几个常用的任务配置,加载,执行的写法
http://www.gruntjs.net/sample-gruntfile Gruntfile 实例 下面就针对一个 Gruntfile 案例做简单分析,也可以作为一个实例使用: module.e ...
随机推荐
- 详解SpringBoot(2.3)应用制作Docker镜像(官方方案)
关于<SpringBoot-2.3容器化技术>系列 <SpringBoot-2.3容器化技术>系列,旨在和大家一起学习实践2.3版本带来的最新容器化技术,让咱们的Java应用更 ...
- Java编程技术之浅析JVM内存
JVM JVM->Java Virtual Machine:Java虚拟机,是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. 基本认知: ...
- Python 导入CSV、JSON、XML数据
常见的机器可读格式包括: - 逗号分隔值(Comma-Separated Values,CSV)- 制表符分隔值(tab-separated values,TSV)- JavaScript 对象符号( ...
- 关于一个服务和api监控的界面,涉及ajax-jsonp,promise应用
<!DOCTYPE html> <html class="mobile hairline" data-dpr=""> <head& ...
- 【JAVA进阶架构师指南】之五:JVM性能调优
前言 首先给大家说声对不起,最近属实太忙了,白天上班,晚上加班,回家还要收拾家里,基本每天做完所有事儿都是凌晨一两点了,没有精力再搞其他的了. 好了,进入正题,让我们来聊聊JVM篇最后一个章节 ...
- [AHOI2017/HNOI2017]单旋
题目 点这里看题目. 分析 最妙的地方在于,这道题其实是用一种数据结构模拟另一种数据结构! 我们需要维护深度和树的结构,以下对于每个操作进行分别讨论. 插入一个新节点 可以发现,这个新 ...
- centos 8分区方案
https://www.cnblogs.com/yogurtwu/p/10717001.html https://zhuanlan.zhihu.com/p/126308255 常见目录解释 Linux ...
- 安装allure测试报告
必须安装jdk1.8,配置环境变量 一.环境准备 Windows10 jdk-9.0.1 二.下载并安装JDK 到Java的官网下载JDK安装包,地址:http://www.oracle.com/te ...
- 囚徒问题(100 prisoners problem)的python验证
密码学课上老师介绍了这样一个问题,囚徒问题(100 prisoners problem):一百个囚徒被关在牢房里,典狱长给他们最后一次机会,100人依次进入一个有100个抽屉的牢房,每个抽屉置乱放入1 ...
- Bestcoder Round8
4989Summary 既然用C++了就偷懒直接用STL大法了 #include<iostream> #include<algorithm> #include<vecto ...