js滚动及可视区域的相关的操作
2024-08-23 13:06:44
element.getBoundingClientRect
判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClientRect.Top<=document.documentElement.clientHeight时表示该元素在可视范围内。
IntersectionObserver对象
异步监听目标元素与其祖先或视窗的位置信息,通常用于替代element.getBoundingClientRect+window.scroll的方案。
window.requestAnimationFrame
将多个可能会导致回流或重绘的操作放在一起一次性执行,避免滚动或操作页面时页面出现卡顿和空白,该方法免除了开发者自己编写“函数防抖”或“函数节流”的麻烦。
element.scrollIntoViewIfNeeded(opt_center)
把某个元素滚动到可视区域,例如手机页面底部的表单输入框获取焦点时,软键盘会遮挡元素。这时就应该使用该特性。
element.requestFullscreen/exitFullscreen
页面全屏或退出全屏
DocumentFragment对象
DocumentFragment
接口表示一个没有父级文件的最小文档对象,它不是真实 DOM 树的其中一部分,它的变化不会引起 DOM 树的重新渲染操作(reflow) ,因此不会导致性能问题。
当我们需要对dom进行频繁的写入操作时,可以用document.createDocumentFragment()创建一个对象
,在此对象上进行添加(append)或被插入(inserted)操作,然后再插入真实的dom节点。因为所有的节点会被一次性
插入到文档中,而这个操作仅发生一个重渲染
的操作,可以大大提高性能。
最新文章
- 06-图1 列出连通集 (25分)(C语言邻接表实现)
- mysql中char与varchar的区别分析
- js计算系统当前日期是星期几的几种方法
- WebAPi(selfhost)
- (转载)最黑的黑客米特尼克:多次耍FBI 终被高手擒
- DNA Sorting(排序)
- 实现一个做双向NAT的虚拟网卡
- php学习笔记--高级教程--读取文件、创建文件、写入文件
- dom小总结
- .32-浅析webpack源码之doResolve事件流(4)
- MIP 问题解决方案大全(2018-06更新)
- JavaScript定时器实现的原理分析
- wxWidgets 在 Linux 下开发环境配置
- jqGrid之treeGrid及行拖拽
- linq总结系列(一)---基础部分
- Codeforces 989D A Shade of Moonlight
- How do you explain Machine Learning and Data Mining to non Computer Science people?
- 716-River Crossing
- Hadoop2源码分析-RPC探索实战
- Springboot分模块开发详解(1):建立父工程