Js获取页面的各种宽高与距离

总是对这些距离模糊，所以决定整理下~

1、screen系列

screen.width:      屏幕的宽度
screen.height:     屏幕的高度

2、style系列（必须是行内设置的样式才有效）

element.style.width:     当前对象的宽度
element.style.height:    当前对象的高度     ==》 jQ: $(obj).height(); 不包含补白和边框
element.style.left:     当前对象的left
element.style.right:     当前对象的right
element.style.top:     当前对象的top值

3、offset系列

element.offsetParent:     当前对象的上层对象
element.offsetWidth:     当前对象的宽度（width+padding+border）
element.offsetHeight:     当前对象的高度（height+padding+border）
element.offsetLeft:     当前对象到其上级层左边的距离     ==》 jQ: $(obj).offset().left
element.offsetTop:     当前对象到其上层的上边距离

element.offsetWidth与style.width的区别：

1. style.width返回值除了数字还有单位；
2. 若宽度设为百分比，则style.width返回值为百分比，而offsetWidth返回的为值；
3. 若没有指定width样式，则style.width返回的是空字符串；
4. style.width不包含padding和border；

4、client

element.clientWidth:     可见窗口宽度，width + padding - 滚动条
element.clientHeight:     可见窗口高度，height + padding - 滚动条
element.clientLeft:     获取对象的边框宽度
element.clientTop:     获取对象的边框宽度

5、scroll

element.scrollWidth     整个对象的宽度，width + padding + margin +border + 滚动条
element.scrollHeight     整个对象的高度，height+ padding + margin +border + 滚动条

下面两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。在对这两个参数设置值时，直接用数字就可以了，否者不起作用
element.scrollLeft     是该元素的显示（可见）的内容与该元素实际的内容的距离。
        简单说：元素会从scrollLeft的位置显示该元素的内容。假如不懂的话，你就把元素的所有内容都在纸画出拉，元素的最左边为0（scrollLeft）,显示的宽度为10（offsetWidth）,那就就能看到0-10的位置，假如scrollLeft为20的话，你就能看到从20的位置开始显示，向后显示10个。
element.scrollTop     与scrollLeft一致。
可实现内容的滚动效果，例：

<style>
	.versionInformation .versionInfor-wrapper{
		border: 1px solid #d7d7d7;
		width: 80%;
		padding: 15px;
		margin-top: 15px;
		height: 525px;
	    overflow: hidden;  //*必须的
	    box-shadow: 0 0 5px #d7d7d7;
	    transition: all 0.5s linear;
	}
</style>
<div class="versionInfor-wrapper">
	<ul class="versionInfor-box">
	    <li class="version-box">
	        <div class="content-box">
	             <p class="time"><label>时间：</label> <span>2019-02-18 10:10</span></p>
	             <p class="text">
	                <label>1更新内容：</label>
	                <span>1本次更新主要添加了。。。。。。。的内容</span>
	              </p>
	        </div>
	    </li>
	    <li class="version-box">
	        <div class="content-box">
	             <p class="time"><label>时间：</label> <span>2019-02-18 10:10</span></p>
	             <p class="text">
	                <label>2更新内容：</label>
	                <span>2本次更新主要添加了。。。。。。。的内容</span>
	              </p>
	        </div>
	    </li>
	    <li class="version-box">
	        <div class="content-box">
	             <p class="time"><label>时间：</label> <span>2019-02-18 10:10</span></p>
	             <p class="text">
	                <label>3更新内容：</label>
	                <span>4本次更新主要添加了。。。。。。。的内容</span>
	              </p>
	        </div>
	    </li>
	    <li class="version-box">
	        <div class="content-box">
	             <p class="time"><label>时间：</label> <span>2019-02-18 10:10</span></p>
	             <p class="text">
	                <label>4更新内容：</label>
	                <span>4本次更新主要添加了。。。。。。。的内容</span>
	              </p>
	        </div>
	    </li>
	</ul>
    <ul class="versionInfor-box"></ul>
</div>
<script>
//版本信息滚动
	        var $box = $(".versionInfor-wrapper").eq(0)[0];
	        var $cont1 = $(".versionInfor-wrapper .versionInfor-box").eq(0)[0];
	        var $cont2 = $(".versionInfor-wrapper .versionInfor-box").eq(1)[0];
	        $(".versionInfor-wrapper .versionInfor-box").eq(1).html($(".versionInfor-wrapper .versionInfor-box").eq(0).html());
	        function boxScroll(){
	        	if($cont2.offsetHeight - $box.scrollTop <= 0){
	        	//console.log("$box.scrollTop = "+ $box.scrollTop +", $cont1.offsetHeight = "+ $cont1.offsetHeight)
	        		//$box.scrollTop -= $cont1.offsetHeight;
	        		$box.scrollTop = 0;
	        	}else{
	        		$box.scrollTop++;
	        	}
	        }
	        var timer = setInterval(boxScroll,20);
	        $(".versionInfor-wrapper").on("mouseover", function(){
	        	clearInterval(timer);
	        });
	        $(".versionInfor-wrapper").on("mouseout", function(){
	        	timer = setInterval(boxScroll,20);
	        });
	</script>

页面滚动距离
$(window).scrollTop();