代码改变世界

设置或返回当前页面相对于窗口显示区左上角的 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