代码改变世界

设置或返回当前页面相对于窗口显示区左上角的 X/Y 位置

2012-07-05 11:05  江苏黑马  阅读(538)  评论(0)    收藏  举报
  1. 这是一个读写属性。
  2. DOM中使用window.pageXOffset和window.pageYOffset来设置或返回当前页面相对于窗口显示区左上角的 X/Y 位置。
  3.  1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 * {
 8     margin: 0;
 9     padding: 0
10 }
11 div {
12     width: 100px;
13     height: 150px;
14     margin: 250px;
15     background-color: #f00
16 }
17 </style>
18 <script>
19 function fScroll(){
20     document.getElementsByTagName("span")[0].innerHTML=(window.pageYOffset+"<br/><br/>"+document.documentElement.scrollTop+"<br/><br/>"+document.body.scrollTop);    
21 }
22 window.onscroll=function(){
23     setTimeout(fScroll(),1000);    
24 }
25 </script>
26 </head>
27 
28 <body>
29 <div><span></span></div>
30 <p style="width:2000px;background-color:#ff0;height:1000px"></p>
31 </body>
32 </html>

    由此可见需要结合window.pageYOffset和document.documentElement.ScrollTop一起使用。
  4. 针对浏览器兼容，我们可以写出这样的兼容代码：
    window.pageXOffset? window.pageXOffset: document.documentElement.scrollLeft
window.pageYOffset? window.pageYOffset: document.documentElement.scrollTop