JS中的offset scroll event client
一、offset
一般用来检测盒子的偏移、位移,都是只读属性,不能赋值
- offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border
- offsetTop和offsetLeft是调用者的盒子距离有定位的父盒子顶部和左侧的长度。如果父盒子都没有定位,就以body为准,如果调用者自身没有top和left时,从父盒子的padding开始计算,不包括border
二、scroll
各种特效和动画中用的比较多,表示在页面滑动的过程中,卷起的部分
- scrollWidth和scrollHeight表示的是调用元素的全部宽度和高度,内容超出也会被算入,包括padding,不包括border和margin,即 scrollWidth = width + padding
- scrollTop和scrollLeft表示的是浏览器在滑轮滑动之后,被遮住的顶部和左侧长度
function scroll() {
//判断返回值是不是undefined
if (window.pageXOffset !== undefined) {
return {
"top": window.pageYOffset,
"left": window.pageXOffset
}
}else if (document.documentElement === "CSS1Compat") {
return {
"top": document.documentElement.offsetTop,
"left": document.documentElement.offsetLeft
}
}else {
return {
"top": document.body.offsetTop,
"left": document.body.offsetLeft
}
} // return { //简写
// "top": window.pageYOffset || document.documentElement.offsetTop || document.body.offsetTop,
// "left": window.pageXOffset || document.documentElement.offsetLeft || document.body.offsetLeft
// }
}
有了这样的封装函数就可以更简单的得到元素在页面或浏览器中的位置
var pagey = event.pageY || scroll().top + event.clientY; //后边是兼容性的写法,被遮挡高度 + 元素距浏览器高度这是封装的一个获取scrollTop和scrollLeft的兼容性写法,documentElement调用的是支持DTD,body调用的不支持DTD,pageYoffset方法是谷歌火狐IE9都支持的方法
判断当前是否声明DTD的方法:
document.compatMode === "BackCompat"; //未声明DTD
document.compatMode === "CSS1Compat"; //已声明DTD
三、event
DOM中的事件,而事件处理函数可以附加在DOM、window这些对象上。在事件发生的时候,event对象会被创建并依次传递给事件监听器,之前已经说过创建事件监听器的方法addEventListener() 要注意的是,在IE旧版本里使用的是attchEvent()这种效果相同的方法,也可以以此写出兼容性的写法。
- 在处理函数中,可以将event作为形参传入,来访问一些Event接口,兼容性写法如:
function method(event) {
event = event || window.event;
}还有好多东西等我以后慢慢发掘,现在还不知道这个里边有什么样的奇淫技巧
- 事件传播的三个阶段:
- 捕获:从最上一级往下查找,直到找到目标事件
- 冒泡:从目标事件开始向上层冒泡,直到最上一级
- 目标:执行事件的代码
四、client
clientWidth:盒子的可见宽度,不包括border和margin 故clientWidth = padding + width
clientHeight:同上
clientTop:盒子上边框的border(喵喵喵???)
clientLeft:同上
区别:
clientWidth = width + border
offsetWidth = width + padding + border
scrollWidth = 内容的宽度(不含border)
clientTop:由event事件调用 代表border的宽
offsetTop:由任意元素调用,但一般是盒子 代表此盒子距离有定位的父盒子的距离
scrollTop:由window调用,盒子也可以调用,但要有滚动条 代表被卷去的高度
JS中的offset scroll event client的更多相关文章
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- 关于js中return false、event.preventDefault()和event.stopPropagation()
在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此 ...
- js三大家族offset,scroll,cliennt的区别
offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...
- 20190430-screen、client、offset、scroll等JS中各种宽度距离
参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
- python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- JavaScript 特效之四大家族(offset/scroll/client/event)
三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
随机推荐
- Day 05 可变不可变、数据类型内置方法
1.可变类型:值改变,但是id不变,证明就是改变原值,是可变类型 2.不可变类型:值改变,但是id也跟着改变,证明是产生新的值,是不可变类型 数字类型 一.整型int 1.用途:记录年龄.等级.数量 ...
- Azure CosmosDB (3) 选择适当的一致性级别
<Windows Azure Platform 系列文章目录> 绝大部分的商业分布式数据库,要求开发人员选择两个极端的数据库一致性:强一致性(Strong Consistency)和最终一 ...
- SpringBoot项目单元测试
关于SpringBoot的单元测试,描述一下三种单元测试的方式. 1.约定 单元测试代码写在src/test/java目录下单元测试类命名为*Test,前缀为要测试的类名 2. 使用mock方式单元测 ...
- TensorFlow 安装报错的解决办法(安装1.5版本)
1.安装Anaconda 百度下载windows版本,一路点下一步,安装好了Anaconda,自带python3.6.6. 2.安装TensorFlow (1)打开Anaconda Prompt,输入 ...
- DataBaseDaoAbstract
import java.lang.reflect.Method; import java.math.BigDecimal; import java.sql.PreparedStatement; imp ...
- MySQL 之 MHA + ProxySQL + keepalived 实现读写分离,高可用(一)
准备服务器: docker network create --subnet=192.168.0.0/16 staticnetdocker run -d --privileged -v `pwd`/my ...
- Java内存列表
当jvm运行起来的时候,它会向系统申请一片内存区,并将这块内存分出一部分存储程序创建的对象,传递给方法的参数,返回值,局部变量等等,我们将这块内存称之为“运行时数据区”. 初学的时候把Java内存分为 ...
- Android Studio计时跳转或点击跳转至主页面
这个总体来说是比较简单的,计时跳转一般调用Android Studio中的Handler方法. 一.发生点击事件跳转页面 mBtnTextView = (Button) findViewById(R. ...
- python中赋值,深拷贝,浅拷贝区别
这三种 的区别就是 复制的变量 是否是原变量的引用. 赋值:只是原变量的引用. 浅拷贝和深拷贝的区别 需要通过 子元素 区分 浅拷贝:子元素的 引用相同 深拷贝:所以引用都不相同,完全复制一份 这三种 ...
- IntelliJ IDEA 构建maven多模块项目
我们在开发中 因为项目之间需要依赖 所以会在maven创建多个项目配置依赖,这种项目结构主要应用在大型项目中,多人协作开发 1.创建一个项目 File ->NEW -> Projec 2. ...