UNPKG

wsemi

Version:

A support package for web developer.

220 lines (177 loc) 7.52 kB
<!DOCTYPE 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>