获取滚动条的位移

为什么我在 onscroll事件里面弹出 
alert(e.scrollTop);
往上移动和往下移动弹出来的是不一样的。
如何得到滚动条正确的位移距离。

解决方案 »

  1.   

    有个例子；<style type="text/css">
    *{margin:0;padding:0;}
    ul{list-style:none;}
    img{border:0;}body{font-family:Tahoma,"宋体";font-size:12px;background:#fff;}
    a:link{text-decoration:none;}
    a:visited{text-decoration:none;}
    a:hover{text-decoration:underline;}
    a:actives{text-decoration:none;}.bulletin{width:176px;float:left;border:1px solid #d9d9d9;color:#666;}
    .bulletin h2{height:18px;font-size:12px;padding:6px 10px 0 30px;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #d9d9d9;font-weight:normal;}
    #main .bulletin h2 a{font-size:12px;color:#666;float:right; text-decoration:underline;}
    .bulletin ul{padding:5px;height:65px;background:#f6f6f6;}
    .bulletin li{height:22px;line-height:22px;padding-left:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;zoom:1;width:150px;}
    .bulletin a{color:#666;}
    .bulletin a:hover{color:#6633cc;}
    </style><div class="bulletin" style="padding-bottom:5px;">
    <h2>欧酷公告</h2>
    <ul style="margin-top:0;margin-bottom:0;padding-bottom:0;border:0;height:auto;">
    <li><a href="/article/?article_id=422" title="元旦期间快递安排" style="color:#0037FF">元旦期间快递安排</a></li>
    </ul>
    <ul style="height:auto;margin-top:0;margin-bottom:0;padding-top:0;height:44px;zoom:1;padding-bottom:0;overflow:hidden;" id="bulletin_id">
    <li style='display:none;'><a href="/article/?article_id=422" title="元旦期间快递安排" style="color:#0037FF">元旦期间快递安排</a></li>
    <li><a href="/article/?article_id=321" title="轻轻松松拿红包！晒单开始！" style="color:#FF0004">轻轻松松拿红包！晒单开始...</a></li>
    <li><a href="/article/?article_id=430" title="5320贴膜错误，欧酷紧急补偿" style="color:#000000">5320贴膜错误，欧酷紧急补...</a></li>
    <li><a href="/article/?article_id=427" title="到货通知 小功能上线了！" style="color:#0021FF">到货通知 小功能上线了！</a></li>
    <li><a href="/article/?article_id=426" title="促销活动致歉信" style="color:#FF0000">促销活动致歉信</a></li>
    <li><a href="/article/?article_id=421" title="5320非移动版又一批到货！！" style="color:#FF0000">5320非移动版又一批到货！...</a></li>
    <li><a href="/article/?article_id=420" title="自提点元旦工作安排" style="color:#F20034">自提点元旦工作安排</a></li>
    <li><a href="/article/?article_id=419" title="陕西地区顺丰恢复公告">陕西地区顺丰恢复公告</a></li>
    <li><a href="/article/?article_id=414" title="新功能！猜出有奖！">新功能！猜出有奖！</a></li>
    </ul>
    </div>
    <SCRIPT language=JavaScript>
    <!--
    function scroll(g,f){
    var e=document.getElementById(g);
    e.innerHTML+=e.innerHTML;
    e.scrollTop=0;
    var a=1;
    var d=f;
    var c=0;
    function b(){
    var h=new Date().getTime();
    if(h-c>=d){
    if((e.scrollTop==e.scrollHeight/8||e.scrollTop==e.scrollHeight/4||e.scrollTop==e.scrollHeight/2||e.scrollTop==0)&&a==0){
    return
    }else{
    e.scrollTop+=e.scrollHeight/176
    }
    if(e.scrollTop==e.scrollHeight/8||e.scrollTop==e.scrollHeight/4||e.scrollTop==132){
    c=h
    }
    if(e.scrollTop==e.scrollHeight/2){
    e.scrollTop=0;c=h
    }
    if(e.scrollTop==0){
    c=h
    }
    }
    }
    setTimeout(function(){
    setInterval(function(){
    b()
    },30)
    },d);
    e.onmouseover=function(){a=0};
    e.onmouseout=function(){a=1}};
    //公告滚动
    scroll('bulletin_id',3000);
    -->
    </SCRIPT>
      

  2.   

    document.documentElement.scrollTop 高度
    这个来球滚动条随着页面的某个元素跟着滚动条走，就可以 了
      

  3.   

    这个没有问题<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>    <script language="javascript">
            window.onscroll = function()
            {
                var scrollPos;
                if (typeof window.pageYOffset != 'undefined')
                {
                    scrollPos = window.pageYOffset;
                }
                else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
                {
                    scrollPos = document.documentElement.scrollTop;
                }
                else if (typeof document.body != 'undefined')
                {
                    scrollPos = document.body.scrollTop;
                }
                document.getElementById("divtest").innerHTML = scroll;
            }
        </script></head>
    <body>
        <br />
        <div style="position: fixed" id="divtest">
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        s
    </body>
    </html>
      

  4.   

      document.getElementById("divtest").innerHTML = scrollPos ;写错一行
      

  5.   

    布局现在是这样的 body不能滚动。滚动的是div。div里面有一个calendar
    <body>
    <div style= ''>
     calendar
    <div>
    </body>我的计算方案是这样  1.在日历弹出来之前计算日历的出现点的坐标。
      {
    情况(1).滚动条没有滚动, 此种情况位移已经计算出来. 记录坐标为x，y 记录calendarX = x,calendarY = y,
    情况(2).滚动条已经滚动, calendarX = calendarX-滚动条已经结束滚动后的x位移,calendarY = calendarY - 滚动条已经结束滚动后的y位移,  }
      2.保存计算出来的calendarX和calendarY , 显示日历。
      3.在onscroll事件中，获取滚动条在不同时刻的位移。calendarX +/- 滚动条在滚动中的x位移，calendarY +/- 滚动条在滚动中的y位移  问题是步骤2里面实际上也要用到scroll事件。而且滚动条在滚动中发生的位移这个单位不好计算。
      

  6.   

    不用计算 <div style="width:100%; height:3000px">
            <div style="border:1px inset red; position:fixed;top:200px;left:200px">canlender</div>
        </div>
      

  7.   

    楼上的，最糟糕的是日历是用document.write方法写到文档里面去的。。不是用createElement做的我想用position也有心无力啊。
      

  8.   

    文档加载完成后找到日历，设置它的position属性