首页 > scroll事件触发取得scrollTop总是滚动前的位置,不是应该返回滚动后的位置吗?并且scroll会重复触发

scroll事件触发取得scrollTop总是滚动前的位置,不是应该返回滚动后的位置吗?并且scroll会重复触发

  1. 1)scroll事件触发取得scrollTop总是滚动前的位置,不是应该返回滚动后的位置吗?并且scroll会重复触发
    2)google ,火狐浏览器 点击上或下滚动箭头后,鼠标再次经过时,也会触发scroll事件,是什么原因造成的? ie浏览器没有这个问题

<html>
    <head>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".btn1").click(function(){
        $("div").scrollTop(100);
      });
      $(".btn2").click(function(){
        alert($("div").scrollTop()+" px");
      });
      $('div').bind('scroll',function(){
         alert($("div").scrollTop()+" px");
      })
    });
    </script>
    </head>
    <body>
    <div style="border:1px solid black;width:200px;height:200px;overflow:auto">
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    </div>
    <button class="btn1">把 scroll top offset 设置为 100px</button>
    <br />
    <button class="btn2">获得 scroll top offset</button>
    </body>
    </html>

scroll事件是在鼠标开始滚动的时候执行的,执行顺序不低于div内的实际滚动发生。所以这时获取的scrollTop为滚动前的位置。其次,鼠标滚动一次大约会触发10次scroll事件,w3school里有一个Try证明了这点。http://www.w3school.com.cn/ti...

但mousewheel事件在鼠标滚动时就只触发一次(在Firefox中请用DOMMouseScroll),可以用它替代。与scroll事件的另一个不同是,该事件只要鼠标滚动了就触发,不论有无滚动条或滚动条是否到底。

第二个问题,个人觉得也是alert中断了浏览器继续执行,属于使用alert的一个特殊情况。


不要用alert,换成console.log看看呢
也许是因为alert中断了执行呢


把alert换成console.log就好

【热门文章】
【热门文章】