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. D - Going Home POJ - 2195 网络流

    On a grid map there are n little men and n houses. In each unit time, every little man can move one ...

  2. 学大伟业 Day 1 培训总结

    第一天培训,讲的基本算法,东西很多.还有些数论,图论,数据结构and some small tricks 一.输入输出技巧 //输入输出技巧 /* scanf.printf:速度快,需要记忆不同数据类 ...

  3. SPFA 全面讲解

    SPFA全面讲解 --最短路高效算法 标签: 最短路 简介:SPFA 是1994年在西安交通大学段凡丁同学所提出,是将Dijsktra以及Bellman-Ford两种最短路算法完美结合的一个算法,效率 ...

  4. CSU-ACM2018暑假集训比赛1

    A:https://www.cnblogs.com/yinbiao/p/9365127.html B:https://www.cnblogs.com/yinbiao/p/9365171.html C: ...

  5. 关闭Debut.Log

    unity5.3支持了运行时关闭产生的debug.log Debug.logger.logEnabled = false; 谢谢你们,让我能在晚上凝视夜空的时候,脑海中浮现出更广阔的世界.

  6. svn使用过程中遇到的问题

    前言:记录一下svn使用的过程中遇到的问题 最近的公司使用的svn来管理项目,因为这个项目接手过来已经有至少一年多的工龄了,所以暂且还是也用svn来处理吧,如果要是做新项目的话,真心地希望使用Git来 ...

  7. CRS

    CRS是集群就绪服务(cluster ready service)的简称,主要负责集群中的资源管理以及OCR管理.为了与10gR2集群管理软件名称crs区分,这里用CRSD代替CRS.相关概念:--资 ...

  8. 自动计算UITableViewCell高度2（CGRect约束）

    1.先创建model .h #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface LBDNe ...

  9. c#一种存储结构解决动态平衡问题

    不说其他了,最近为了实现这么一个场景了而提取的一种结构.我们把一种数据缓存,比如开辟的存储Buffer,或者连接池.放置在一个结构中.很多时候这有一个共同的特点,我们的业务在一段时间会急剧增长,我们开 ...

  10. vue项目中使用vuex

    1.运行 cnpm i vuex -S 2.导入包 import Vuex from 'vuex' 3.注册vuex到vue中 Vue.use(vuex) 4. var store = new Vue ...