文档章节

js判断元素在某个区域内是否可见

放开那个女孩
 放开那个女孩
发布于 2017/09/13 17:09
字数 468
阅读 18
收藏 0

getBoundingClientRect介绍

getBoundingClientRect获取元素位置

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。

该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

getBoundingClientRect()最先是IE的私有属性,现在已经是一个W3C标准。所以你不用当心浏览器兼容问题,不过还是有区别的:IE只返回top,lef,right,bottom四个值,不过可以通过以下方法来获取width,height的值

var ro = object.getBoundingClientRect();
var Width = ro.right - ro.left;
var Height = ro.bottom - ro.top;

//兼容所有浏览器写法:

var ro = object.getBoundingClientRect();
var Top = ro.top;
var Bottom = ro.bottom;
var Left = ro.left;
var Right = ro.right;
var Width = ro.width||Right - Left;
var Height = ro.height||Bottom - Top;

//有了这个方法,获取页面元素的位置就简单多了:

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

getBoundingClientRect判断元素是否在可视区域

以前的办法是通过各种offset判断元素是否可见,网上很多教程,大家可以自己去查找。 getBoundingClientRect是获取可视区域相关位置信息的,使用这个属性来判断更加方便:

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

getBoundingClientRect兼容性

目前来说兼容性还是不错的,但是使用前还是查看一下caniuse比较好。

caniuse

 

参考网址:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

https://div.io/topic/1400

本文转载自:https://div.io/topic/1400

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
如何判断元素是否进入可视区域viewport?

个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个关键字的出现更是家常便饭,...

付出
2018/11/27
0
0
原生 JS 实现最简单的图片懒加载

懒加载 ------------------------------------------------------------------------------------------------ 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访...

NingLn
04/11
0
0
JavaScript 工作原理之十一-渲染引擎及性能优化小技巧

原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland。 本系列持续更新中,Github 地址请查阅这里。 这是 JavaScript 工作原理的第十一章。 迄今为止,之前的...

tristan
2018/06/17
0
0
JavaScript是如何工作的:渲染引擎和优化其性能的技巧

摘要: 理解浏览器渲染。 原文:JavaScript是如何工作的:渲染引擎和优化其性能的技巧 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及其所构建的组件的系...

Fundebug
01/14
0
0
前端入门6-JavaScript客户端api&jQuery

声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在...

请叫我大苏
2018/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

DevExpress-winform实现打印功能

创建Windows窗体,拖入richEdtControl(或者GridControl)+打印按钮(button) 双击打印,创建click事件,直接用richEdtControl1调用ShowPrintPreview()方法 private void btnPrint_Click(o...

元歌
27分钟前
2
0
Lucene

Lucene 简介: Lucene是apache下的一个开源的全文检索引擎工具 1.1.全文检索:先分词创建索引,再搜索(分词:就是将一个句子分成多个单词) 全文检索的流程分为两大部分:索引流程、搜索流程...

klmkom
28分钟前
1
0
SpringBoot2.0高级案例(03):集成 JavaMail ,实现异步发送邮件

本文源码码云地址:知了一笑https://gitee.com/cicadasmile/middle-ware-parent 一、JavaMail的核心API 1、API功能图解 2、API说明 (1)、Message 类: javax.mail.Message 类是创建和解析邮...

知了一笑
28分钟前
16
0
Andrew Ng 机器学习鸡尾酒音频分离算法解析

[w,s,v] = svd((repmat(sum(x.*x,1),size(x,1),1).*x)*x'); 在学习机器学习的课程过程中,ng用一行代码实现了音频分离的效果,这里对这行代码进行解析。 [x1, Fs1] = audioread('E:\sounds\f...

gdxz110
31分钟前
1
0
动漫人物阴影绘画技巧

动漫人物阴影绘画技巧?我们在上色的时候,对色彩的使用都大致了解,但是却不知道怎么画阴影。如果这是在现实日常生活中会看到的,但是要想画出来的话就很难了,下面就让我们一起来看看画阴影...

设绘嗨
33分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部