$(window).scroll() firing on page load

后端 未结 5 603
无人及你
无人及你 2020-12-20 16:01

Is there a way to prevent $(window).scroll() from firing on page load?

Testing the following code in Firefox 4, it fires even when I unplug the mouse.<

相关标签:
5条回答
  • 2020-12-20 16:08

    The scroll event is unrelated to the mouse, it is called whenever a new document scrolling position is set. And arguably that position is set when the document loads (you might load it with an anchor after all), also if the user presses a cursor key on his keyboard. I don't know why you need to ignore the initial scroll event but I guess that you only want to do it if pageYOffset is zero. That's easy:

    var oldPageYOffset = 0;
    $(window).scroll(function(){
      if (window.pageYOffset != oldPageYOffset)
      {
        oldPageYOffset = window.pageYOffset;
        console.log("Window scrolling changed");
      }
    });
    

    Note: MSIE doesn't have window.pageYOffset property so the above will need to be adjusted. Maybe jQuery offers a cross-browser alternative.

    0 讨论(0)
  • 2020-12-20 16:08

    sure, don't load it until after the load. make it a call back for sleep for 500 millis.

    0 讨论(0)
  • 2020-12-20 16:21

    The scroll event does not fire on every load, only when refreshing a page that was scrolled, or when navigating to an anchor directly.

    Many of the answers suggest ignore the first time it's called, which would ignore a valid scroll if the page doesn't get scrolled initially.

    //Scroll the page and then reload just the iframe (right click, reload frame)
    
    
    //Timeout of 1 was not reliable, 10 seemed to be where I tested it, but again, this is not very elegant.
    //This will not fire initially
    setTimeout(function(){
      $(window).scroll(function(){
         console.log('delayed scroll handler');
      }); 
    }, 10); 
    
    //This will fire initially when reloading the page and re-establishing the scroll position
    $(window).scroll(function(){
      console.log('regular scroll handler');
    });
    div {  
      height: 2000px;
      border: 1px solid red;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
    </div>

    0 讨论(0)
  • 2020-12-20 16:26

    This was the solution I went for. Any improvements gratefully received.

       var scroll = 0;
        $(window).scroll(function(){
                        if (scroll>0){
                        console.log("Scroll Fired");
                        }
                        scroll++;
        });
    
    0 讨论(0)
  • 2020-12-20 16:26

    This seems to have worked for me.

    $(window).bind("load", function() {
        $(window).on("scroll", function () {
            console.log('scroll');
        });
    });
    
    0 讨论(0)
提交回复
热议问题