阅读 88

滚动触发 CSS 特效

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

监听对应元素的滚动事件 Vue中 @scorll=“(e) => onScroll(e)”

通过e.target或window获取目标的相关高度(或宽度),来计算元素是否滚动

网页可见区域高:clientHeight
网页被卷去的高:scrollTop
网页正文全文高:scrollHeight (滚动区域总高)
网页可见区域高:offsetHeight (包括边线的高)
一般来说有clientHeight + scrollTop = scrollHeight
复制代码

修改类名更换样式

方法一: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,而直接添加样式,可能触发多次reflow or repaint,影响页面渲染速度

文章分类
前端
文章标签