文档章节

随笔:offset、client、scroll的小总结

我的头没你大
 我的头没你大
发布于 2016/12/06 11:31
字数 666
阅读 15
收藏 0

这段日子看到scrollTop,突然想起了这三个小兄弟,于是看了很多文章,但发现总结的各有优缺和对错,于是决定自己总结一下,仅当随笔。有错误的欢迎指正。

这些属性均是用于获取页面元素在网页中的位置或相对位置,这里又可以简单的分为两类用途:

           1.获取页面固定元素的位置;2.获取鼠标点击位置

先从页面固定元素的位置说起,用法均是  element.属性名  :

       1.首先还是来说说offset家族吧(offsetWidth、offsetHeight、offsetLeft和offsetTop)

offsetWidth是指元素的宽度(包括元素的边框),或者说元素水平方向上占用的空间大小。

offsetHeight是指元素的高度(包括元素的边框),或者说元素垂直方向上占用的空间大小。

offsetLeft:元素左外边框到  上层元素或左侧元素  之间的距离

offsetTop:元素上外边框到  上层元素或左侧元素  之间的距离

         width和height很好理解,只需注意他是包含边框宽度的;

         关键在于Left和Top很可能有坑会出现,其实目前发现写也就两种情况:

                    1.对于普通元素。就是距离其左侧最近的兄弟元素或父元素的距离

                    2.对于position:absolute 等脱离文档流的,就要看其left和top属性了

        2.client家族 (clientWidth、clientHeight、clientLeft和clientTop

              了解了offset,其实client很简单。

              clientWidth和clientHeight是不含边框厚度的宽高

              clientLeft和ClientTop则能获取到边框的厚度

         3.scroll家族(scrollTop、scrollLeft、scrollWidth和scrollHeight

             正如offset和client在document.body元素上没有什么实际意义不多说了,

             scroll家族 主要用于document.body元素上, 用在页面元素上并没有什么特殊体现

             当页面出现上下或左右滑动条时,scroll的作用就体现出来了:

      document.body.scrollWidth和document.body.scrollHeight就是页面可视区域的大小了,

     document.body.scrollLeft和document.bodyscrollTop就是可视区离整个文档的左、顶侧的距离。

        最后关于这三者的总结就是 :

                    要找某个元素的位置和大小:用elem.offset;

                    要找涉及到元素的边框厚度:用elem.client  ;

                    要涉及到滚轮和可视区大小、距离,用:document.body.scroll ; 

        另外,对于事件对象e的几个获取鼠标位置的属性,是这样的(事件触发时传入并使用):

         相对于屏幕左上角: e.screenX/screenY
         相对于文档显示区左上角: e.clientX/clientY
         相对于所在元素左上角的坐标:e.offsetX/offsetY

              

© 著作权归作者所有

共有 人打赏支持
我的头没你大
粉丝 1
博文 6
码字总数 3300
作品 0
杭州
程序员
JS之offset scroll系列

三大系列:offset、scroll、client offset:偏移、补偿、位移 offset 系列是 js 中的一套获取元素尺寸的便捷办法 JS中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括: 获取...

Halukn
05/13
0
0
客户区尺寸client

关于元素尺寸,一般地,有偏移大小offset、客户区大小client和滚动大小scroll。前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区大小   客户区大小...

jjjssswww
2017/06/06
0
0
自己写了一个滑动门插件,但是在一个页面上无法处理多个效果

麻烦js高手帮忙看看: 插件是这个: var akulubala = { "init":{"speed":1000, "direction":"bottom",//direction "mode":"fitful",//scroll mode durative or fitful "id":"akulubalascrol......

akulubala_
2013/03/03
362
4
jquery滚动/跳转页面到指定位置的实现思路

还有一个方法通过jQuery的aminate动画方法也可以做,我贴出代码 ...这里是很多文字,把页面撑开,撑出滚动条... 滚动到这里 隐藏之后滚动到这里...再加点文字... OK,成功!这个方法有个好处,...

gutaotao1989
2017/12/20
0
0
Android 控制ScrollView滚动到底部

转载自:http://blog.csdn.net/t12x3456/article/details/12799825 在开发中,我们经常需要更新列表,并将列表拉倒最底部,比如发表微博,聊天界面等等, 这里有两种办法,第一种,使用scrollT...

lv18092081172
2017/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

es6

在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组 传入对象,返回属性名 var obj = {'a':'123','b':'345'};console.l...

不负好时光
13分钟前
0
0
叮!您收到一份超值Java基础入门资料!

摘要:Java语言有什么特点?如何最大效率的学习?深浅拷贝到底有何区别?阿里巴巴高级开发工程师为大家带来Java系统解读,带你掌握Java技术要领,突破重点难点,入门面向对象编程,以详细示例...

全部原谅
15分钟前
0
0
web.xml容器加载顺序

容器对于web.xml的加载过程是context-param >> listener >> fileter >> servlet

Aeroever
17分钟前
1
0
Docker容器日志查看与清理

1. 问题 docker容器日志导致主机磁盘空间满了。docker logs -f container_name噼里啪啦一大堆,很占用空间,不用的日志可以清理掉了。 2. 解决方法 2.1 找出Docker容器日志 在linux上,容器日...

muzi1994
18分钟前
0
0
J2Cache 和普通缓存框架有何不同,它解决了什么问题?

不少人看到 J2Cache 第一眼时,会认为这就是一个普普通通的缓存框架,和例如 Ehcache、Caffeine 、Spring Cache 之类的项目没什么区别,无非是造了一个新的轮子而已。事实上完全不是一回事!...

红薯
21分钟前
414
14

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部