查看捲軸的滾動距離
<script type="text/javascript"> function getScrollOffset() { if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset } else{ return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop, } } } </script>
#document.body.clientWidth/clientHeight
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return { w : window.innerWidth, h : window.innerHeight } }else{ if(document.compatMode ==="BackCompat") { return { w : document.body.clienWidth, h : document.body.clientHeight } }else{ return { w : document.documentElement.clientWidth, h : document.documrntElement.clientHeight } } } </script>
返回的結果並不是」即時的”
讓滾動條捲動
eg:利用scroll()頁面定位功能。
eg:利用scrollBy()快速閱讀功能。
做一個小閱讀器,會自動翻頁。
<!DOCTYPE html><html><head> <title>Document</title></head><body>文本内容 <p style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</p> <p style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</p></body><script type="text/javascript"> var start = document.getElement.getElementsByTagName('p')[0]; var stop = document.getElement.getElementsByTagName('p')[1]; var timer = 0; var key = true; //加锁,防止连续点start产生累加加速 start.onclick = function() { if(key) { timer = setInterval(function() { window.scollBy(0,10); },100); key = false; } } stop.onclick = function() { clearInterval(timer); key = true; }</script>
#查看元素的位置
傳回最近的有定位的父級,如無,傳回body,body.offsetParent回傳null
#eg:求元素相對於文件的座標getElementPosition
#相關文章:
以上是JavaScript中取得視窗的屬性(視窗高度、元素尺寸、元素位置)的詳細內容。更多資訊請關注PHP中文網其他相關文章!