client/offset/srooll位置与关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .id{ margin: 10px; border: 5px solid red; top: 40px; width: 300px; height:300px; } .jj{ margin: 10px; border: 50px solid blue; top: 40px; width: 200px; height: 200px; overflow: scroll; } p{ height: 20px; } </style> <body> <div class="id" id="is"> <div class="jj" id="jj"> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p> <p>水电费水电费是</p><p>水电费水电费是</p><p>水电费水电费是</p> </div> </div> </body> <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> </html>
一、Window视图属性
1、innerWidth 属性和innerHeight 属性 例如innerWidth表示获取window窗体的内部宽度，不包括用户界面元素，比如窗框
_getViewHeight = function () { var _viewHeight = 0; if( typeof window.innerHeight !== 'undefined' ){ _viewHeight = window.innerHeight; } else if(typeof document.compatMode !== 'undefined' && document.compatMode !== "BackCompt"){ _viewHeight = document.documentElement.clientHeight; } else{ _viewHeight = document.body.clientHeight; } return _viewHeight; };2、outerWidth属性和outerHeight属性 例如outerWidth/outerHeight表示整个浏览器窗体的大小，包括任务栏等 3、pageXOffset和pageYOffset 表示整个页面滚动的像素值（水平方向的和垂直方向的
screenX and screenY
距离屏幕的高度和宽度
二、Screen视图属性 1. availWidth和availHeight 显示器可用宽高，不包括任务栏之类 avail 英 [əˈveɪl] 美 [əˈvel]
2. colorDepth
3.pixelDepth 该属性基本上与colorDepth一样 4. width和height 表示显示器屏幕的宽高。
三、元素视图属性1. clientLeft和clientTop
2. clientWidth和clientHeight 表示内容区域的高度和宽度，包括padding大小，但是 3.offsetLeft和offsetTop 表示相对于最近的祖先定位元素（CSS position 属性被设置为的左右偏移值
偏移距离时相对于html文档左上角的偏移值
4.offsetWidth和offsetHeight 整个元素的尺寸（包括边框）
5、scrollLeft和scrollTop
表示元素滚动的像素大小。可读可写。
五、鼠标位置(Mouse position)
-
1. clientX,clientY 相对于window，为鼠标相对于window的偏移 event.clientX event.clientY screenX, screenY 鼠标相对于显示器屏幕的偏移坐标 event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 event.offsetX、event.offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。 event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
六、jquery的位置
position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
scrollTop([val])
概述
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
Draw.prototype.getAbsoluteLeft = function (_e) {
var _left = _e.offsetLeft,
_current = _e.offsetParent;
while(_current !== null){
_left += _current.offsetLeft;
_current = _current.offsetParent;
}
return _left;
};
/**
* 获取元素的绝对顶部坐标
* @param _e 需要获取的元素dom对象
* @returns {number|Number}
*/
Draw.prototype.getAbsoluteTop = function (_e) {
var _top = _e.offsetTop,
_current = _e.offsetParent;
while(_current !== null){
_top += _current.offsetTop;
_current = _current.offsetParent;
}
return _top;
};
/**
* 获取元素的鼠标的位置
* @param _e
* @returns {{}}
*/
Draw.prototype.getMousePoint = function(_e){
var body = document.body,
_left = 0,
_top = 0;
if(typeof window.pageXOffset != 'undefined'){
_left = window.pageXOffset;
_top = window.pageYOffset;
}
else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){
_left = document.documentElement.scrollLeft;
_top = document.documentElement.scrollTop;
}
else {
_left = body.offsetLeft;
_top = body.offsetTop;
}
_left += _e.clientX;
_top += _e.clientY;
this._mousepos.left = _left;
this._mousepos.top = _top;
return this._mousepos;
};
