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="https://cdn.jsdelivr.net/npm/wsemi@1.7.19/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-aaa')">scroll to aaa</button>
<button onclick="siv('l1-bbb')">scroll to bbb</button>
<button onclick="siv('l1-ccc')">scroll to ccc</button>
<div style="height:20px;"></div>
<div id="l1-aaa" style="display:inline-block;">aaa</div>
<div style="height:300px;"></div>
<div id="l1-bbb" style="display:inline-block;">bbb</div>
<div style="height:300px;"></div>
<div id="l1-ccc" style="display:inline-block;">ccc</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-aaa')">scroll to aaa</button>
<button onclick="siv('l2-bbb')">scroll to bbb</button>
<button onclick="siv('l2-ccc')">scroll to ccc</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-aaa" style="display:inline-block;">aaa</div>
<div style="height:300px;"></div>
<div id="l2-bbb" style="display:inline-block;">bbb</div>
<div style="height:300px;"></div>
<div id="l2-ccc" style="display:inline-block;">ccc</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-aaa')">scroll to aaa</button>
<button onclick="siv('l3-bbb')">scroll to bbb</button>
<button onclick="siv('l3-ccc')">scroll to ccc</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-aaa" style="display:inline-block;">aaa</div>
<div style="height:300px;"></div>
<div id="l3-bbb" style="display:inline-block;">bbb</div>
<div style="height:300px;"></div>
<div id="l3-ccc" style="display:inline-block;">ccc</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>