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滚动及可视区域的相关的操作的更多相关文章

  1. js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。

    前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...

  2. js 判断进入可视区域

      js 判断进入可视区域 CreateTime--2018年4月14日08:17:41 Author:Marydon 1.使用场景 图片懒加载时候需要用到,其他情况暂时没有遇到,欢迎留言补充! 2. ...

  3. 移动端,input、textarea滚动至可视区域

    1.一般情况下 在移动端,点击input框之后,会弹出输入键盘.而内容input的内容也会自动滚动到可视区域内. 2.当父元素设置了overflow属性之后 在设置了overflow属性之后,点击in ...

  4. input聚焦时,滚动至可视区域

    这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...

  5. vue input聚焦时,滚动至可视区域

    这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获 ...

  6. JS获取浏览器可视区域尺寸

    本文所说的是浏览器窗口的可视区域大小,不是浏览器窗口大小,也非页面尺寸. 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth doc ...

  7. JS获取浏览器可视区域的尺寸

    所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnbl ...

  8. js 获取页面可视区域宽高

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...

  9. 【转】JS获取浏览器可视区域的尺寸

    from: http://www.xiaoboy.com/detail/1341545044.html 所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 docum ...

随机推荐

  1. 【luogu P1306 斐波那契公约数】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1306#sub gcd(f[m],f[n]) = f[gcd(m,n)] #include <iostr ...

  2. 【题解】洛谷P1495 曹冲养猪 (中国剩余定理)

    洛谷P1495:https://www.luogu.org/problemnew/show/P1495 思路 建立了a个猪圈 有b头猪没有去处 即x≡b(mod a) x即是ans 把所有的关系全部列 ...

  3. UGUI富文本

    <b>text</b>  --粗体 <i>text<i>     --斜体 <size=10>text</size>   --自 ...

  4. docker官方文档翻译3

    转载请标明出处: https://blog.csdn.net/forezp/article/details/80171723 本文出自方志朋的博客 第三部分: 服务 准备工作 安装Docker 1.1 ...

  5. linux 怎么查看系统的环境变量 与设置jdk 系统环境变量

    1.win 7 ,win10 怎么查看,添加系统环境的变量,大家都非常清楚的.但是linux 的 却不一定哦. 打开终端输入 :  “echo $PATH “ or  “export ”      如 ...

  6. 调用微信JS上传照片接口上传图片

    public ActionResult UploadImge(string serverId) { var headPath = "/UploadImage/" + DateTim ...

  7. 小a的强迫症(组合数学)

    问题描述: 小a是一名强迫症患者,现在他要给一群带颜色的珠子排成一列,现在有N种颜色,其中第i种颜色的柱子有num(i)个.要求排列中第i种颜色珠子的最后一个珠子,一定要排在第i+1种颜色的最后一个珠 ...

  8. 【TOJ 3305】Hero In Maze II

    描述 500年前,Jesse是我国最卓越的剑客.他英俊潇洒,而且机智过人^_^.突然有一天,Jesse心爱的公主被魔王困在了一个巨大的迷宫中.Jesse听说这个消息已经是两天以后了,他急忙赶到迷宫,开 ...

  9. 使用 form 和 iframe 实现图片上传回显

    主要利用 form 的 target 属性,在提交表单之后 response 返回到 iframe 中 form 的 action 可以自己写,也可以直接利用 富文本编辑器的接口实现上传 <fo ...

  10. 关于对连接数据库时出现1130-host “**” is not allowed to connect to this MySql/mariadb server 的错误解决方法

    在完成mariadb的搭建后,在端口与防火墙均为正常的情况下,出现了1130- Host xxx is not allowed to connect to this MariaDb server 的情 ...