几乎所有的项目都要解决这样一个问题:判断一个元素是否出现在浏览器窗口中?因为通过它我们可以极大的优化项目的性能,进而提升用户的的体验。原生javasxript获取浏览器的滚动距离和可视窗口的高度

使用场景及技术分析

所涉及的业务实现,比较常见的就是电商平台或者是图片展示类的网站。电商网站,如:淘宝京东等;图片展示类,如:花瓣pinterest

涉及的技术,如:lazyload技术动态的加载图片(元素),无限加载技术,包括基于骨架屏技术加载静态资源。

  • 懒加载(lazyload):它目的是按需加载,而很大一部分项目的前端实现是通过判断一个元素是否出现在浏览器窗口中,如果出现则将img元素标签内的src属性中的图片地址替换成自定data-src属性的地址,但这里不一定是data-src属性,也可能是srcsetpinterest中就是这样做的,当然你也可以定义成任何你喜欢的,这只是其中的一种方式;另一种是判断元素是否出现在浏览器窗口中之后,然后加载一个HTML代码块,小米商城官网就是这样实现的,当然也有其他一些也是这样做的,这里就不一一做介绍了。
  • 无限加载(infinte scroll):它是通过底部的 加载更多 这个代码块是否出现在浏览器窗口中,如果在,就向容器代码块中追加一定数量的相关代码块,这时 加载更多 这个代码块就会被挤压出到浏览器窗口之外。当然有些无限加载技术也使用lazyload。
  • 骨架屏技术(skelton screen):这个技术在前一波广受关注,它的原理就是在请求一个页面时,先不显示页面的内容,先显示页面的布局,像文字、图片、视频等静态资源都不显示,而显示的是与页面布局相关的css样式。其实通俗一点来说,就是网页做一个CT,这样是不是理解起来更方便?像淘宝的pc官网,youtube都是这样实现的。

这些业务和技术的目的都是为了为了解决低网速情况下使用web应用,如果页面内内容没有加载,那么就会造成低用户体验。

这些业务和使用的技术基本上都用了 判断页面的元素是否出现在浏览器窗口中

如何判断一个元素是否出现在窗口中呢?

现在通用的是基于浏览器的窗口的判断

那么何为基于浏览器窗口的判断呢?这要通过DOM的API .getBoundingClientRect() ,获取目标元素距离浏览器窗口的位置坐标(top, left) 或者(x, y)坐标,所以说是基于浏览器窗口的。我们可以拖动浏览器的滚动条来使目标元素从浏览器的顶端进入浏览器窗口(这可以判断上边界),也可以从浏览器的底部进入浏览器窗口(这可以判断下边界),而这正好是判断目标元素进入浏览器窗口的边界。

上边界:

目标元素的底边刚好和浏览器的顶部重合,当滚动条向下滚动,目标元素从底部开始一点点的出现,直到目标元素整个出现在浏览器窗口,反之,则逐渐远离。如果目标元素高度大于浏览器窗口的高度,那么浏览器窗口内就不不出现整个目标元素,而只会出现部分,基于这种情况衍生了一种目标元素背景图片的滚动动画。可参考苹果官网

下边界:

目标元素的顶部刚好和浏览器的底部重合,当滚动条向上滚动,目标元素从顶部部开始一点点的出现,直到目标元素整个出现在浏览器窗口,反之,则逐渐远离。

我们可以浏览器的滚动条向下滚动(也可以按照向下滚动,答案类似)写出如下的代码:


var clienRect = el.getBoundingClientRect(); if (clientRect.top > -clientRect.width && clientRect.top < window.innerHeight) {}
// 或者
if (clientRect.bottom > 0 && clientRect.top =< window.innerHeight) {}

有的同学可能会问,是不是窗口的高度小于目标元素的高度,或者窗口的高度大于目标元素的高度都这样都一样呢?我想说一样,因为这里是根据两个边界得出的结论。

上面的判断包括目标元素的部分出现在浏览器窗口,那么如何判断整个目标元素出现在浏览器的窗口中呢?可参考如下的代码:


var clienRect = el.getBoundingClientRect(); if (clientRect.top > 0 && clientRect.top < window.innerHeight - clientRect.width) {}
// 或者
if (clientRect.top >= 0 && clientRect.bottom > window.innerHeight) {}

兼容性可参考can i use

基于document文档的顶部来判断

这里要使用的是DOM元素的 .offsetTop 来计算目标元素的顶部边界到document文档的顶部边界的距离,使用window的 .pageYoffset 来计算当浏览器滚动条滚动时document文档卷起的高度,通过比较这两个高度,我们就可以轻松的判断目标元素是否出现在浏览器窗口内。

当目标元素的上边界和浏览器窗口的下边界重合,目标元素的 offsetTop 是个定值,所以此时document文档卷起的高度和目标元素的 offsetTop 之间存在这样一个等式:window.innerHeight + window.pageYoffset = el.offsetTop。若继续向下滚动浏览器的滚动条,目标元素将出现在浏览器当中,我们都知道 window.pageYoffset 的值将继续变大,由于 el.offsetTopwindow.innerHeight 都是个定值,所以我们可以得到这样一个边界条件,当 window.pageYoffset > el.offsetTop - window.innerHeight ,目标元素从浏览器窗口的底部逐渐出现。

当浏览器的滚动条继续向上滚动会出现目标元素的下边界和浏览器窗口的上边界重合的情况,当继续向下滚动滚动条元素将从浏览器窗口消失,此时存在这样一个等式:window.pageYoffset + el.offsetHeight = el.offsetTop ,所以很明显,如果 window.pageYoffset 的值继续增大,目标元素将消失与浏览器窗口,因此,很明显,只有 window.pageYoffset < el.offsetTop - el.offsetHeight 目标元素才会出现在浏览器窗口内。

参考代码如下:


if (window.pageYoffset &gt; el.offsetTop - window.innerHeight &amp;&amp; window.pageYoffset &lt; el.offsetTop - el.offsetHeight) {}

当然,上面的是目标元素部分或整体出现在浏览器窗口的判断条件,如果是整个目标元素,方法同上,可参考下面的代码:


if (window.pageYoffset &gt; el.offsetTop - window.innerHeight - el.offsetHeight &amp;&amp; window.pageYoffset &lt; el.offsetTop) {}

虽然这种方法也可以,但它的浏览器兼容性不如第一种。

参考资料

原文地址:https://segmentfault.com/a/1190000017303509

判断DOM元素是否出现再浏览器窗口中的更多相关文章

  1. 利用闭包判断Dom元素和滚动条的方向

    本文收集整理自网上. 一,判断滚动条的方向,利用闭包首先保存滚动条的位置,然后当滚动时候不断更新滚动初始值,然后通过差指判断方向 function scroll(fn) { //利用闭包判断滚动条滚动 ...

  2. CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?

    最基本的: 设置display属性为none,或者设置visibility属性为hidden 技巧性: 设置宽高为0,设置透明度为0,设置z-index位置在-1000

  3. 一个窗口里包含一个iframe,点击iframe内的submit按钮,返回的视图总是显示在iframe中,我想要的效果是点击按钮后返回的视图是在浏览器窗口中...?asp.net mvc 的action中,不用js怎么实现??????????

    Content("<script type='text/javascript'>parent.location.href = '" + url + "';&l ...

  4. Phaser游戏框架与HTML Dom元素之间的通信交互

    本想按照PHASER的HTML Dom元素官方实例:http://labs.phaser.io/index.html?dir=game%20objects/dom%20element/&q=  ...

  5. JS判断指定dom元素是否在屏幕内的方法实例

    前言 刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,或者图片的懒加载效果,它就会展现显示动画,十分有趣.那么这是如何实现的呢? 实现原理 想要实现这个功能,就要知道具体的实现原 ...

  6. 部分浏览器上a标签包裹的dom元素显示不正常

    在苹果和部分安卓机上出现,pc端和chrome浏览器响应式设计里怎么样也不会出现的访问后a标签包裹的dom元素显示不正常a标签内的hr元素颜色显示不正常hr水平线的颜色被 bootstrap的css的 ...

  7. 浏览器中开发人员工具快速找到dom元素绑定那些JS事件

    在web开发过程中难免会遇到让程序员去修改一些js代码东西,例如js的ajax和php等语言的交互等,在这其中你不得不了解点js的事件触发,且随着js的盛行各种插件的事件让程序员眼花缭乱,所以借助一个 ...

  8. jQuery -&gt; 怎样【先创建、再改动、后加入】 DOM元素

    怎样一气呵成地.on the fly地操作DOM元素呢? 比如顺序运行[创建]-> [改动]-> [加入]三个动作. 因为jQuery支持链式操作,事实上就是设计模式的builder模式, ...

  9. DOM元素的位置、尺寸及更多的信息

    一.基本概念 document.documentElement是整个DOM树的根节点,对应的元素就是html.下面将其称作根元素或根节点. document.body,对应的元素是body 二.浏览器 ...

随机推荐

  1. Codeforces Gym101502 B.Linear Algebra Test-STL(map)

    B. Linear Algebra Test   time limit per test 3.0 s memory limit per test 256 MB input standard input ...

  2. Java 基础【02】 Super 用法

    路漫漫其修远兮,吾将上下而求索.——屈原<离骚> 昨天写this用法总结的时候,突然产生了一个问题,请教别人之后,有了自己的一点认识.还是把它写下来,为大家更好的认识提供一点思路. 1)有 ...

  3. JAVA通过使用sort方法排序

    java 代码: 对集合排序: //升序public void listSort1(){ List<Integer> list = new ArrayList<Integer> ...

  4. android showmessage

    package com.example.yanlei.yl6; import android.annotation.TargetApi; import android.app.Activity; im ...

  5. Linux 设备驱动开发 —— platform设备驱动应用实例解析

    前面我们已经学习了platform设备的理论知识Linux 设备驱动开发 —— platform 设备驱动 ,下面将通过一个实例来深入我们的学习. 一.platform 驱动的工作过程 platfor ...

  6. 转: 浅析Fusion-IO和Intel SSD

    from: http://alanwu.blog.51cto.com/3652632/865235 标签:SSD 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否 ...

  7. vue-router钩子beforeRouteEnter函数获取到this实例

    官方文档: const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 ...

  8. sh脚本——#!/bin/bash

    #!/bin/bash是指此脚本使用/bin/bash来解释执行. 其中,#!是一个特殊的表示符,其后,跟着解释此脚本的shell路径. bash只是shell的一种,还有很多其它shell,如:sh ...

  9. 实现TextView中link的点击效果

    朋友们,你们在TextView处理link的时候是不是一直被苦逼的android默认的方式困扰?每次点击link的时候,点击效果是整个textview来响应.非常烂吧?原因就不多赘述了. 那么以下这个 ...

  10. 每日一支TED——帕特里夏&#183;瑞安:不要固执于英语

         瑞安讲述了她在科威特教学英语30年最大的 关于语言的一个感受:英语在迅速的在全世界传播,而其它的语言在逐渐的消失.      瑞安想要说的是.拥有一种国际性的语言,大家都能够理解,让全部人的 ...