文档章节

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

我的头没你大
 我的头没你大
发布于 2016/12/06 11:31
字数 666
阅读 19
收藏 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
jquery滚动/跳转页面到指定位置的实现思路

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

gutaotao1989
2017/12/20
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
Android 控制ScrollView滚动到底部

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

lv18092081172
2017/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

兄弟连区块链教程之以太坊源码分析交易数据分析

交易的数据结构 交易的数据结构定义在core.types.transaction.go中,结构如下: type Transaction struct {data txdata// cacheshash atomic.Valuesize atomic.Valuefrom atomic.V...

兄弟连区块链入门教程
13分钟前
1
0
Tomcat优化经验之谈

Tomcat优化经验之谈 程序员小新人学习 2018-07-23 12:09:36 由于刚做完一个tomcat,jboss,Oracle性能优化项目,想做个总结。写写项目过程中对他们优化过程的理解。 tomcat安装配置就不讲啦(...

两广总督bogang
19分钟前
2
0
Spark中foreachPartition和mapPartitions的区别

spark的运算操作有两种类型:分别是Transformation和Action,区别如下: Transformation:代表的是转化操作就是我们的计算流程,返回是RDD[T],可以是一个链式的转化,并且是延迟触发的。 Ac...

张泽立
22分钟前
2
0
git reset 和 git revert, git log 和 git reflog 比较

前言:仙儿苦设相思局,寻欢误入冷香处 故事背景: 那一晚 月黑风高之夜 李寻欢 在自诩为江湖正义的一群伪君子设计好的圈套(repository)中做了(commit)三件事:              ...

猿神出窍
32分钟前
1
0
kotlin使用spring mvc(一)

过滤器Filter,是Servlet的一种技术。可通过Filter,对请求进行拦截,比如判断用户是否登录、验证黑名单等并且可对请求进行预处理。 接下来介绍使用WebFilter配置过滤器并实现读取cookie判断...

weidedong
37分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部