js滚动及可视区域的相关的操作

Posted 我是格鲁特

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js滚动及可视区域的相关的操作相关的知识,希望对你有一定的参考价值。

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节点。因为所有的节点会被一次性插入到文档中,而这个操作仅发生一个重渲染的操作,可以大大提高性能。

详细介绍

以上是关于js滚动及可视区域的相关的操作的主要内容,如果未能解决你的问题,请参考以下文章

判断滚动条到底部的JS代码

js里关于各种尺寸的获取

如何判断元素在可视区域内

如何使用js检测页面上一个元素是不是已经滚动到了屏幕的可视区域内

Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例

html2canvas截图时只截取到可视区域的内容,滚动的隐藏区域截取不到,怎么解决?