js監聽滾動條事件和獲取瀏覽器及螢幕高度和寬度等資訊的方法
阿新 • • 發佈：2019-01-31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>監聽滾動條事件</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{width: 100%;}
li{width: 100%;height: 50px;}
</style>
</head>
<body>
<ul>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
</ul>
</body>
<script type="text/javascript">
window.addEventListener("scroll",function(e){
//alert("滾動了");
//變數t就是滾動條滾動時，到頂部的距離
var t =document.documentElement.scrollTop||document.body.scrollTop;
console.log(t)
if(t <= 0){
alert("到頂部了")
}
});
</script>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>監聽滾動條事件</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{width: 100%;}
li{width: 100%;height: 50px;}
</style>
</head>
<body>
<ul>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
<li>0001</li>
</ul>
</body>
<script type="text/javascript">
window.addEventListener("scroll",function(e){
//alert("滾動了");
//變數t就是滾動條滾動時，到頂部的距離
var t =document.documentElement.scrollTop||document.body.scrollTop;
console.log(t)
if(t <= 0){
alert("到頂部了")
}
});
</script>
</html>
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
螢幕解析度的高： window.screen.height
螢幕解析度的寬： window.screen.width
螢幕可用工作區高度： window.screen.availHeight
螢幕可用工作區寬度： window.screen.availWidth