在公司開發的專案中需要實現類似windows檔案在檢視效果為圖片時的選中效果
1、檔案有圖示和檔名組成，當能看到檔案的這兩個資訊時，直接選中父元素有滾動條時不滾動
2、檔案顯示不完整時（只顯示檔名，只顯示圖示或部分圖示），選中元素並使父元素滾動以顯示檔案的資訊

以下程式碼實現了判斷元素的位置，元素該怎麼移動，具體移動多少，根據檔案大小和需求自行編寫

<div id="box">
	<ul id="ul-list">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
 

*{
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	html,body{
		width: 100%;
		height: 100%;
	}
	#box{
		width: 500px;
		height: 500px;
		margin: 30px auto 0;
		border: 1px solid rgba(0,0,0,.5);
		overflow: hidden;
	}
	#box ul{
		position: relative;
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	ul li{
		
		list-style: none;
		float: left;
		width: 25%;
		height: 50px;
		background: rgba(255,255,255,.5);
		border: 2px solid #ccc;
		margin: 10px;
	}
	ul li:nth-child(3n){
		margin-right: 0;
	}
 

var oUl=document.getElementById("ul-list");
	var oLis=oUl.getElementsByTagName("li");
	　　for(var i=0;i<oLis.length;i++)　{
				oLis[i].onclick=(function(i){	
				　　return function(){
						var that = this;
						var eleTop = that.offsetTop;//獲取元素距父元素的距離
						var elementH = that.offsetHeight;//獲取元素的高度
						var parentH = that.parentNode.offsetHeight;//獲取父元素的高度
						var scrollTop = that.parentNode.scrollTop;//父元素的滾動高度
						var maxH = scrollTop + parentH;
						if(eleTop < maxH && eleTop + elementH > maxH ){
							console.log("move to up");
						}else if(eleTop + elementH > scrollTop && scrollTop > eleTop){
							console.log("move down");
						}
						if(eleTop >= scrollTop && eleTop <= maxH - elementH){
							console.log("the element all in parent area");
						}
				　　}
			}(i));
	　　}
 

如果元素不全部顯示在檢視中，在move to up 和move down中分別新增
        if(eleTop < maxH && eleTop + elementH > maxH ){
            scrollTop = elementH + eleTop - parentH; // move up
        }else if(eleTop + elementH > scrollTop && scrollTop > eleTop){
            scrollTop = eleTop;  // move down
        }
        element.parentNode.scrollTop = scrollTop;//設定滾動高度