文档章节

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

我的头没你大
 我的头没你大
发布于 2016/12/06 11:31
字数 666
阅读 20
收藏 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
Android 控制ScrollView滚动到底部

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

lv18092081172
2017/05/09
0
0
UIScrollView的常见属性和方法

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

哪一种黑
2016/02/29
28
2

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
27分钟前
0
0
kiss原则

KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”。换句话说来,”简单就是美“。KISS 原则源于 David Mamet(大卫马梅)的电...

NB-One
29分钟前
7
0
MYSQL事务处理

INNODB 事务里,所有表引擎必须为INNODB,在非实务表上操作,不会警告,不会报错,但没有效果

关元
今天
3
0
cmake 编译脚本

#!/bin/sh test -d build || mkdir -p build cd build cmake .. make

shzwork
今天
2
0
从零开始实现Vue简单的Toast插件

概述: 在前端项目中,有时会需要通知、提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息。 1. 实例 在Vue组件的methods内,调用如下代码 `this``.$toast({...

前端小攻略
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部