判斷元素是否在父元素中
阿新 • • 發佈:2019-01-09
在公司開發的專案中需要實現類似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;//設定滾動高度