判断元素是否在父元素中

在公司开发的项目中需要实现类似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;//设置滚动高度