Prevent browser scroll on HTML5 History popstate

javascript html dom-events browser-history
Alex Malet de Carteret picture Alex Malet de Carteret · May 24, 2012 · Viewed 25.1k times · Source

Is it possible to prevent the default behaviour of scrolling the document when a popstate event occurs?

Our site uses jQuery animated scrolling and History.js, and state changes should scroll the user around to different areas of the page whether via pushstate or popstate. The trouble is the browser restores the scroll position of the previous state automatically when a popstate event occurs.

I've tried using a container element set to 100% width and height of the document and scrolling the content inside that container. The problem with that I've found is it doesn't seem to be nearly as smooth as scrolling the document; especially if using lots of css3 like box-shadows and gradients.

I've also tried storing the document's scroll position during a user initiated scroll and restoring it after the browser scrolls the page (on popstate). This works fine in Firefox 12 but in Chrome 19 there is a flicker due to the page being scrolled and restored. I assume this is to do with a delay between the scroll and the scroll event being fired (where the scroll position is restored).

Firefox scrolls the page (and fires the scroll event) before popstate fires and Chrome fires popstate first then scrolls the document.

All the sites I've seen that use the history API either use a solution similar to those above or just ignore the scroll position change when a user goes back/forward (e.g. GitHub).

Is it possible to prevent the document being scrolled at all on popstate events?

Answer

Tamás Bolvári picture Tamás Bolvári · Oct 8, 2015 
if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

(Announced by Google on September 2, 2015)

Browser support:

Chrome: supported (since 46)

Firefox: supported (since 46)

IE/Edge: not supported, ask for support (then leave link in comment)

Opera: supported (since 33)

Safari: supported

For more info, see Browser compatibility on MDN.

Related questions

How to make JavaScript execute after page load?

I'm executing an external script, using a <script> inside <head>. Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like to execute some JavaScript …

Read More
jQuery.click() vs onClick

I have a huge jQuery application, and I'm using the below two methods for click events. First method HTML <div id="myDiv">Some Content</div> jQuery $('#myDiv').click(function(){ //Some code }); Second method HTML <…

Read More
Onclick javascript to make browser go back to previous page?

Is there a function I can attach as a click event of a button to make the browser go back to previous page? <input name="action" type="submit" value="Cancel"/>

Read More