页面滚动触发 CSS 动画

知识点:事件监听、可视区域、DOM 操作、重绘重拍

1、监听对应元素的滚动事件

  • 可以通过 e.target 或 window 获取目标的相关滚动高度(或宽度),来计算元素是否滚动
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft

对应的 dom 元素的宽高有以下几个常用的:

元素的实际高度:document.getElementById("div").offsetHeight
元素的实际宽度:document.getElementById("div").offsetWidth
元素的实际距离左边界的距离:document.getElementById("div").offsetLeft
元素的实际距离上边界的距离:document.getElementById("div").offsetTop
复制代码

2、滚动时修改类名切换样式

方法一:getAttribute/setAttribute

var targetId = document.getElementById("id")
var classVal = targetId.getAttribute("class");

删除:
classVal = classVal.replace("someClassName","");
targetId.setAttribute("class",classVal );

添加:
classVal = classVal.concat(" someClassName");	 
targetId.setAttribute("class",classVal );

替换:
classVal = classVal.replace("someClassName","otherClassName");
targetId.setAttribute("class",classVal );
复制代码

方法二:H5 新特性 classList

增加:targetId.classList.add("otherClass""anotherClass""thirdClass");
去除:targetId.classList.remove("otherClass");
替换:targetId.classList.replace("someClassName","otherClassName");
复制代码

思考:为什么使用修改类名来更换样式?

reflow (回流)与 repaint (重绘)

reflow 只有在影响了布局时触发

repaint 不会影响布局,如字体颜色、背景色的修改

因为直接更改类名添加样式只会触发一次 reflow or repaint,而直接添加样式,若多个 CSS 属性,会触发多次 reflow or repaint,影响页面渲染速度

分类:
前端
标签: