页面滚动触发 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，影响页面渲染速度