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视图属性

、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;

};

、outerWidth属性和outerHeight属性

例如outerWidth/outerHeight表示整个浏览器窗体的大小，包括任务栏等

、pageXOffset和pageYOffset

表示整个页面滚动的像素值（水平方向的和垂直方向的

screenX and screenY
距离屏幕的高度和宽度

二、Screen视图属性

. availWidth和availHeight

显示器可用宽高，不包括任务栏之类

avail

英 [əˈveɪl]  美 [əˈvel]

. colorDepth

3.pixelDepth

该属性基本上与colorDepth一样

. width和height

表示显示器屏幕的宽高。

三、元素视图属性1. clientLeft和clientTop

. clientWidth和clientHeight

表示内容区域的高度和宽度，包括padding大小，但是

.offsetLeft和offsetTop

表示相对于最近的祖先定位元素（CSS position 属性被设置为的左右偏移值

偏移距离时相对于html文档左上角的偏移值

.offsetWidth和offsetHeight

整个元素的尺寸（包括边框）

5、scrollLeft和scrollTop

表示元素滚动的像素大小。可读可写。

五、鼠标位置(Mouse position)

. 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;

};