scroll offset & client总结
oEvent.clientX 是指鼠标到可视区左边框的距离。
oEvent.clientY 是指鼠标到可视区上边框的距离。

clientWidth 是指可视区的宽度。
clientHeight 是指可视区的高度。
clientLeft 是指左边框的宽度。
clientTop 是指上边框的宽度。
获取可视区的宽高:
document.documentElement.clientWidth
document.documentElement.clientHeight

offsetWidth 是指div的宽度(包括div的边框)
offsetHeight 是指div的高度(包括div的边框)
offsetLeft 是指div到整个页面左边框的距离(不包括div的边框)
offsetTop 是指div到整个页面上边框的距离(不包括div的边框)

scrollTop 是指可视区顶部边框与整个页面上部边框的看不到的区域。
scrollLeft 是指可视区左边边框与整个页面左边边框的看不到的区域。
scrollWidth 是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度(包括边框)
scrollHeight 是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度(包括边框)
向上滚动的距离scollTop的兼容性写法:
document.documentElement.scrollTop || document.body.scrollTop
scroll offset & client总结的更多相关文章
- Html 中scroll offset client 总结
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- scroll、client和offset的区别
scroll.client和offset的区别:http://www.cnblogs.com/pcd12321/p/4448420.html
- 三大家族(offset、scroll、client)
offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- 关于scroll、client、offset和style中的height、width、top以及bottom属性
内容和图片来自offset.scroll.client三大家族, 此处仅作记录使用 client offset scroll
随机推荐
- fastText(三):微博短文本下fastText的应用(二)
上一篇讲到,fastText在训练数据中过拟合的问题.接下来将介绍一些提高fastText泛化能力的尝试. 模型泛化使用过fastText的人,往往会被它的很多特性征服,例如训练速度.兼具word e ...
- vue-resource 设置请求的参数以formData形式以及设置请求的过滤器
在main.js中添加下面的设置: Vue.http.options.emulateJSON = true;Vue.http.options.headers = {'Content-Type': 'a ...
- Codechef WEASELTX
WEASELTX code给你一棵 n 个节点的有根树(节点),以及每个节点 i 的初始权值 a[i] .一次操作则是指将每个节点的权值变为以其为根的子树中所有节点的权值之异或和.维护 q 个询问,每 ...
- 解决 Xshell 连接出现 The remote SSH server rejected X11 forwarding request 问题
问题描述 使用 Xshell 5 首次连接虚拟机 CentOS 7.6 出现这样的提示: WARNING! The remote SSH server rejected X11 forwarding ...
- 【POJ - 3190 】Stall Reservations(贪心+优先队列)
Stall Reservations 原文是English,这里直接上中文吧 Descriptions: 这里有N只 (1 <= N <= 50,000) 挑剔的奶牛! 他们如此挑剔以致于 ...
- iOS [CIContext initWithOptions:]: unrecognized selector sent to instance 模拟器 iOS 8.4
在模拟器(iPhone 4s,iOS 8.4)中运行应用时, 应用crash在了使用CIContext(options:nil) 这个API的一个纯Swift第三方库. StackOverFlow的解 ...
- Lightoj 1038 - Race to 1 Again (概率DP)
题目链接: Lightoj 1038 - Race to 1 Again 题目描述: 给出一个数D,每次可以选择数D的一个因子,用数D除上这个因子得到一个新的数D,为数D变为1的操作次数的期望为多少 ...
- 注册jdbc驱动的三种方式
java.sql.DriverManger类简介 java的驱动管理类.管理一组 JDBC 驱动程序. javax.sql.DataSource 接口是 JDBC 2.0 API 中的新增内容,它 ...
- mysql中迅速插入百万条测试数据的方法
对比一下,首先是用 mysql 的存储过程弄的: 复制代码代码如下: mysql>delimiter $ mysql>SET AUTOCOMMIT = 0$$ mysql> crea ...
- 167 Two Sum II - Input array is sorted 两数之和 II - 输入有序数组
给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数.函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2.请注意,返回的下标值(i ...