wsemi
Version:
A support package for web developer.
129 lines (79 loc) • 4.33 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 domScrollIntoView</title>
<!-- @babel/polyfill已廢棄 -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
<script src="../dist/wsemi.umd.js"></script>
</head>
<body>
<div style="margin:0px 20px 20px 0px; display:inline-block; vertical-align:top; padding:20px; border:1px solid #ddd;">
<div style="font-size:1.3rem; margin-bottom:10px;">One layer(body)</div>
<button onclick="siv('l1-scla')">scroll to scla</button>
<button onclick="siv('l1-sclb')">scroll to sclb</button>
<button onclick="siv('l1-sclc')">scroll to sclc</button>
<div style="height:20px;"></div>
<div id="l1-scla" style="display:inline-block;">scla</div>
<div style="height:300px;"></div>
<div id="l1-sclb" style="display:inline-block;">sclb</div>
<div style="height:300px;"></div>
<div id="l1-sclc" style="display:inline-block;">sclc</div>
</div>
<div style="margin:0px 20px 20px 0px; display:inline-block; vertical-align:top; padding:20px; border:1px solid #ddd;">
<div style="font-size:1.3rem; margin-bottom:10px;">Two layer</div>
<button onclick="siv('l2-scla')">scroll to scla</button>
<button onclick="siv('l2-sclb')">scroll to sclb</button>
<button onclick="siv('l2-sclc')">scroll to sclc</button>
<button onclick="siv('l2-ddd')">scroll to ddd</button>
<div style="height:20px;"></div>
<div style="display:inline-block; width:400px; height:400px; overflow:scroll; border:1px solid #ddd;">
<div style="width:600px;"></div>
<div id="l2-scla" style="display:inline-block;">scla</div>
<div style="height:300px;"></div>
<div id="l2-sclb" style="display:inline-block;">sclb</div>
<div style="height:300px;"></div>
<div id="l2-sclc" style="display:inline-block;">sclc</div>
<div style="height:300px;"></div>
<div style="width:600px; text-align:right;">
<div id="l2-ddd" style="display:inline-block;">ddd</div>
</div>
</div>
</div>
<div style="margin:0px 20px 20px 0px; display:inline-block; vertical-align:top; padding:20px; border:1px solid #ddd;">
<div style="font-size:1.3rem; margin-bottom:10px;">Three layer</div>
<button onclick="siv('l3-scla')">scroll to scla</button>
<button onclick="siv('l3-sclb')">scroll to sclb</button>
<button onclick="siv('l3-sclc')">scroll to sclc</button>
<button onclick="siv('l3-ddd')">scroll to ddd</button>
<button onclick="siv('l3-eee')">scroll to eee</button>
<div style="height:20px;"></div>
<div style="display:inline-block; width:400px; height:400px; overflow:scroll; border:1px solid #ddd;">
<div style="display:inline-block; width:500px; height:500px; overflow:scroll; border:1px solid #ddd;">
<div style="width:600px;"></div>
<div id="l3-scla" style="display:inline-block;">scla</div>
<div style="height:300px;"></div>
<div id="l3-sclb" style="display:inline-block;">sclb</div>
<div style="height:300px;"></div>
<div id="l3-sclc" style="display:inline-block;">sclc</div>
<div style="height:300px;"></div>
<div style="width:600px; text-align:right;">
<div id="l3-ddd" style="display:inline-block;">ddd</div>
</div>
</div>
<div style="height:50px;"></div>
<div style="width:550px; text-align:right;">
<div id="l3-eee" style="display:inline-block;">eee</div>
</div>
</div>
</div>
<div style="height:500px;"></div>
<script>
function siv(id){
let ele = document.querySelector("#"+id)
wsemi.domScrollIntoView(ele)
// ele.scrollIntoView({ behavior: "smooth" })
}
</script>
</body>
</html>