文档章节

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

我的头没你大
 我的头没你大
发布于 2016/12/06 11:31
字数 666
阅读 14
收藏 0
点赞 0
评论 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

客户区尺寸client

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

jjjssswww ⋅ 2017/06/06 ⋅ 0

JQuery监听页面滚动总结

1、当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2、获取指定元素的页面位置: $(val).offset().top; 3、对页面滚动条滚动的监听:要放在页面加载的...

夜辰 ⋅ 2015/04/03 ⋅ 2

jquery滚动/跳转页面到指定位置的实现思路

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

gutaotao1989 ⋅ 2017/12/20 ⋅ 0

Android 控制ScrollView滚动到底部

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

lv18092081172 ⋅ 2017/05/09 ⋅ 0

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

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

akulubala_ ⋅ 2013/03/03 ⋅ 4

理解Scroll Views

可能你很难相信 UIScrollView 和一个标准的 UIView 差异并不大,scroll view 确实会多出一些方法,但这些方法只是和 UIView 的属性很好的结合到一起了。因此,在要想弄懂 UIScrollView 是怎么...

Jeans ⋅ 2015/08/09 ⋅ 0

UIScrollView的常见属性和方法

二、UIScrollView 的常见属性 1、contentSize // default CGSizeZero @property(nonatomic) CGSize contentSize; 1.1 contentSize 的含义: 告诉 UIScrollView 要展示的内容实际有多大,也就是......

哪一种黑 ⋅ 2016/02/29 ⋅ 2

js平滑滚动到顶部,底部,指定地方

滚动到顶部:$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 滚动到指定位置:$('.scroll_a').click(function(){$('html,body').animate({scrollT......

紫地瓜 ⋅ 2015/12/03 ⋅ 0

滚动到顶部-jquery.scrolltotop.js

使用教程: 直接粘贴下面的代码, 作为一个引入 配置参数: 初始化插件:

前端届的科比 ⋅ 2014/05/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 5分钟前 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 21分钟前 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 29分钟前 ⋅ 0

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 33分钟前 ⋅ 0

大数据入门基础:SSH介绍

什么是ssh 简单说,SSH是一种网络协议,用于计算机之间的加密登录。 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码...

董黎明 ⋅ 52分钟前 ⋅ 0

web3j教程

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 汇智网最新发布的web3j教程,详细讲解...

汇智网教程 ⋅ 59分钟前 ⋅ 0

谷歌:安全问题机制并不如你想象中安全

腾讯科技讯 5月25日,如今的你或许已经对许多网站所使用的“安全问题机制”习以为常了,但你真的认为包括“你第一个宠物的名字是什么?”这些问题能够保障你的帐户安全吗? 根据谷歌(微博)安...

问题终结者 ⋅ 59分钟前 ⋅ 0

聊聊spring cloud gateway的RedisRateLimiter

序 本文主要研究下spring cloud gateway的RedisRateLimiter GatewayRedisAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/gateway/con......

go4it ⋅ 今天 ⋅ 0

169. Majority Element - LeetCode

Question 169. Majority Element Solution 思路:构造一个map存储每个数字出现的次数,然后遍历map返回出现次数大于数组一半的数字. 还有一种思路是:对这个数组排序,次数超过n/2的元素必然在中...

yysue ⋅ 今天 ⋅ 0

NFS

14.1 NFS介绍 NFS是Network File System的缩写 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导开发,最新为4.1版本 NFS数据传输基于RPC协议,RPC...

派派菠菜 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部