wsemi
Version:
A support package for web developer.
220 lines (177 loc) • 7.52 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>examples for domIsVisible</title>
<!-- @babel/polyfill已廢棄 -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
<!-- IntersectionObserver polyfill -->
<script nomodule src="https://cdn.jsdelivr.net/npm/intersection-observer@0.14.4/intersection-observer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wsemi@1.7.19/dist/wsemi.umd.js"></script>
<style>
.item {
display:inline-block;
border:1px solid #ddd;
text-align:center;
vertical-align:middle;
}
.itemScroll {
width:150px;
min-width:150px;
max-width:150px;
height:150px;
line-height:150px;
}
.itemVisible {
width:78px;
min-width:78px;
height:78px;
line-height:78px;
}
</style>
</head>
<body>
<div style="margin:20px; display:inline-block; vertical-align:top;">
<div style="font-size:1.1em;">Scroll</div>
<div id="scroll-panel" style="width:400px; height:400px; overflow:scroll; border:1px solid #ddd;">
<div style="display:flex;">
<div blk="[0,0]" class="item itemScroll"></div>
<div blk="[0,1]" class="item itemScroll"></div>
<div blk="[0,2]" class="item itemScroll"></div>
<div blk="[0,3]" class="item itemScroll"></div>
<div blk="[0,4]" class="item itemScroll"></div>
</div>
<div style="display:flex;">
<div blk="[1,0]" class="item itemScroll"></div>
<div blk="[1,1]" class="item itemScroll"></div>
<div blk="[1,2]" class="item itemScroll"></div>
<div blk="[1,3]" class="item itemScroll"></div>
<div blk="[1,4]" class="item itemScroll"></div>
</div>
<div style="display:flex;">
<div blk="[2,0]" class="item itemScroll"></div>
<div blk="[2,1]" class="item itemScroll"></div>
<div blk="[2,2]" class="item itemScroll"></div>
<div blk="[2,3]" class="item itemScroll"></div>
<div blk="[2,4]" class="item itemScroll"></div>
</div>
<div style="display:flex;">
<div blk="[3,0]" class="item itemScroll"></div>
<div blk="[3,1]" class="item itemScroll"></div>
<div blk="[3,2]" class="item itemScroll"></div>
<div blk="[3,3]" class="item itemScroll"></div>
<div blk="[3,4]" class="item itemScroll"></div>
</div>
<div style="display:flex;">
<div blk="[4,0]" class="item itemScroll"></div>
<div blk="[4,1]" class="item itemScroll"></div>
<div blk="[4,2]" class="item itemScroll"></div>
<div blk="[4,3]" class="item itemScroll"></div>
<div blk="[4,4]" class="item itemScroll"></div>
</div>
</div>
</div>
<div style="margin:20px; display:inline-block; vertical-align:top;">
<div style="font-size:1.1em;">Detect Visibility</div>
<div id="visible-panel" style="width:400px; height:400px; border:1px solid #ddd;">
<div style="display:flex;">
<div blk="[0,0]" class="item itemVisible"></div>
<div blk="[0,1]" class="item itemVisible"></div>
<div blk="[0,2]" class="item itemVisible"></div>
<div blk="[0,3]" class="item itemVisible"></div>
<div blk="[0,4]" class="item itemVisible"></div>
</div>
<div style="display:flex;">
<div blk="[1,0]" class="item itemVisible"></div>
<div blk="[1,1]" class="item itemVisible"></div>
<div blk="[1,2]" class="item itemVisible"></div>
<div blk="[1,3]" class="item itemVisible"></div>
<div blk="[1,4]" class="item itemVisible"></div>
</div>
<div style="display:flex;">
<div blk="[2,0]" class="item itemVisible"></div>
<div blk="[2,1]" class="item itemVisible"></div>
<div blk="[2,2]" class="item itemVisible"></div>
<div blk="[2,3]" class="item itemVisible"></div>
<div blk="[2,4]" class="item itemVisible"></div>
</div>
<div style="display:flex;">
<div blk="[3,0]" class="item itemVisible"></div>
<div blk="[3,1]" class="item itemVisible"></div>
<div blk="[3,2]" class="item itemVisible"></div>
<div blk="[3,3]" class="item itemVisible"></div>
<div blk="[3,4]" class="item itemVisible"></div>
</div>
<div style="display:flex;">
<div blk="[4,0]" class="item itemVisible"></div>
<div blk="[4,1]" class="item itemVisible"></div>
<div blk="[4,2]" class="item itemVisible"></div>
<div blk="[4,3]" class="item itemVisible"></div>
<div blk="[4,4]" class="item itemVisible"></div>
</div>
</div>
</div>
<script>
function setBlk(id){
//elep
let elep=document.querySelector(id)
//eles
let eles=elep.querySelectorAll("[blk]")
for(let i=0;i<eles.length;i++){
let ele=eles[i]
let blk=ele.getAttribute("blk")
ele.innerHTML=blk
}
}
function getVisible(){
let r=[]
//elep
let elep=document.querySelector('#scroll-panel')
//eles
let eles=elep.querySelectorAll("[blk]")
//pmvs
let pmvs=[]
for(let i=0;i<eles.length;i++){
let ele=eles[i]
let blk=ele.getAttribute("blk")
let pmv=wsemi.domIsVisible(ele)
.then(function(visible){
r.push({
blk:blk,
visible:visible,
})
})
.catch(function(err){
console.log(err)
})
pmvs.push(pmv)
}
return Promise.all(pmvs)
.then(function(){
return r
})
}
function showVisible(vs){
//elep
let elep=document.querySelector('#visible-panel')
for(let i=0;i<vs.length;i++){
let v=vs[i]
let blk=v.blk
let ele=elep.querySelector('[blk="'+blk+'"]')
ele.style.background=v.visible?'rgba(255,50,100,0.8)':'transparent'
}
}
//setBlk
setBlk('#scroll-panel')
setBlk('#visible-panel')
//detect
setInterval(function() {
getVisible()
.then(function(vs){
// console.log(vs)
showVisible(vs)
})
},50)
</script>
</body>
</html>