Im halfway down my page as I have an anchor. I also have a window scroll event:

$(window).scroll(function(){
});

When I refresh the page, the scroll event fires. Is there a way to prevent this on the refresh but still listen for the scroll event when the user scrolls?

Im halfway down my page as I have an anchor. I also have a window scroll event:

$(window).scroll(function(){
});

When I refresh the page, the scroll event fires. Is there a way to prevent this on the refresh but still listen for the scroll event when the user scrolls?

• javascript
• jquery

Share Improve this question Follow asked Dec 4, 2015 at 18:26 panthropanthro 24.1k7070 gold badges205205 silver badges350350 bronze badges 2

• use the function as $(window).on('scroll',function(){}); – Adarsh Mohan Commented Dec 4, 2015 at 18:30
• Duplicate of stackoverflow./questions/6452960/… – Will Commented Dec 4, 2015 at 18:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I believe your scroll code only fires if you refresh the page and the page is scrolled. That's because the browser will reload the page, and then scroll to the original position.

The solution suggested by Arnelle does not work well, because the scroll event only fires initially if the page was scrolled when you refreshed it.

Hack Alert

What I found that does work is waiting to set the scroll handler. Be careful, I'm using magic numbers that may not work on all connections.

//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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>

And yes, I know I bashed Arnelle by saying they patched a problem without understanding, and here I am, suggesting a patch. The only difference is that I think I understand the problem.

My main question to the OP is. Most scroll handlers that I've written work fine if called multiple times, what is the problem with your handler being called an extra time?

You can use a flag variable to detect whether the scroll event is the initial scroll event or not, effectively stopping the callback function's execution for the scroll event on page reload.

var initialScrollEvent = true;

$(window).scroll(function() {
  if (!initialScrollEvent) {
    // callback function body
  }
  initialScrollEvent = false;
});

It es from scroll chrome scroll position restoration. This prevents initial scroll event, but because of preventing scroll position memoization also.

window.history.scrollRestoration = "manual";

see more: https://developer.chrome./blog/history-api-scroll-restoration

Unfortunately this event not marked as synthetic (isTrusted == true), but seems should be.

Keep restoration, but skip first event you can with some weird heuristic – save current scroll position when page unloads, somewhere in refresh-persistent storage: history, local storage or cookie, then paring it with new one from "initial" event.