javascript - Does window.scrollTo work asynchronously in Safari? - Stack Overflow

admin管理员组

文章数量:1297058

Recently I found very strange(in my opinion) window.scrollTo behaviour in Safari(6.0.5 (8536.30.1), MacOS 10.8.4). It seems it works asynchronously.

My task sounds like:

• make some absolute positioned div to be fixed positioned (pin it)
• do some page scroll
• make previously modified div to be absolutely positioned back (unpin it)

So to unpin this div I have to execute unpin routine just after scroll modification is plete. And here I met the problem. Every browser I checked does it correctly except Safari.

Steps to reproduce:

1. Open any web page in Safari and make sure it is scrollable at least for 100px and it's initial scroll offset is 0
2. Open js console in dev tools
3. execute: window.scrollTo(0, 100); console.log(document.body.scrollTop);

The output is 0. But when I change this code to window.scrollTo(0, 100); window.setTimeout(function() {console.log(document.body.scrollTop)}, 1); the output is 100, as expected.

Here are all other browsers I've tested(where it works fine):

• Chrome 27.0.1453.110 (MacOS 10.8.4)
• Firefox 21.0 (MacOS 10.8.4)
• Opera 12.15 b1748 (MacOS 10.8.4)
• IE 8.0.7601.17514 (Win7)

Well, as soon as my code sample is not cross browser, it's easier to check this behaviour on any web page with jQuery:

var $w = $(window); 
$w.scrollTop(100); 
console.log($w.scrollTop());

VS

var $w = $(window); 
$w.scrollTop(100); 
window.setTimeout(function() {
    console.log($w.scrollTop())
}, 1);

Is this behavior is ok or is it a bug? How to handle it? (Now I modified $.fn.scrollTop to return $.Deferred instead of chaining and resolve it instantly in main thread in all browsers except Safari).

Recently I found very strange(in my opinion) window.scrollTo behaviour in Safari(6.0.5 (8536.30.1), MacOS 10.8.4). It seems it works asynchronously.

My task sounds like:

• make some absolute positioned div to be fixed positioned (pin it)
• do some page scroll
• make previously modified div to be absolutely positioned back (unpin it)

So to unpin this div I have to execute unpin routine just after scroll modification is plete. And here I met the problem. Every browser I checked does it correctly except Safari.

Steps to reproduce:

1. Open any web page in Safari and make sure it is scrollable at least for 100px and it's initial scroll offset is 0
2. Open js console in dev tools
3. execute: window.scrollTo(0, 100); console.log(document.body.scrollTop);

The output is 0. But when I change this code to window.scrollTo(0, 100); window.setTimeout(function() {console.log(document.body.scrollTop)}, 1); the output is 100, as expected.

Here are all other browsers I've tested(where it works fine):

• Chrome 27.0.1453.110 (MacOS 10.8.4)
• Firefox 21.0 (MacOS 10.8.4)
• Opera 12.15 b1748 (MacOS 10.8.4)
• IE 8.0.7601.17514 (Win7)

Well, as soon as my code sample is not cross browser, it's easier to check this behaviour on any web page with jQuery:

var $w = $(window); 
$w.scrollTop(100); 
console.log($w.scrollTop());

VS

var $w = $(window); 
$w.scrollTop(100); 
window.setTimeout(function() {
    console.log($w.scrollTop())
}, 1);

Is this behavior is ok or is it a bug? How to handle it? (Now I modified $.fn.scrollTop to return $.Deferred instead of chaining and resolve it instantly in main thread in all browsers except Safari).

• javascript
• safari
• scroll

Share Improve this question Follow edited Jan 10, 2015 at 19:40 Alex 11.3k1313 gold badges5252 silver badges6464 bronze badges asked Jun 20, 2013 at 11:45 icanhazbroccoliicanhazbroccoli 1,03599 silver badges1616 bronze badges 5

• Just want to ment that the timeout actually helped us fix a problem today. I know it's not the best, but it is a workaround that works. – seangates Commented Jul 25, 2013 at 8:40
• @seangates Thx for the note. I rewrote $.scrollTo method with deferred instance as return object. Found this most applicable in this case but unfortunately without backwards patibility( – icanhazbroccoli Commented Jul 26, 2013 at 12:21
• 1 If you could share that code it would be great for the munity. Sorry I don't have an answer for you. Wish I did. :D – seangates Commented Jul 26, 2013 at 18:53
• Now window.scrollTo(0, 100); console.log(document.body.scrollTop); works fine in Safari 8. Close it. – Alex Commented Jan 10, 2015 at 19:43
• 1 Yeah, tested on Version 8.0.3 (10600.3.18) and your code works fine. For older Safari Browser, I guess it is possible that there is somekind of a gap before the scrollTop is finished. I've tried to look up this, but current implementation should be "sync" -> dev.w3/csswg/cssom-view/#dom-element-scrolloptions . If you're interested here is the jQuery code: github./jquery/jquery/blob/… which is not looking async. As you're using it and not the native browser function – Fer To Commented Jun 12, 2015 at 8:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

JavaScript scroll functions generally work synchronously. I had a similar problem with scrollBy() where I've noticed that it was running asynchronously which caused my function to crash. The problem was that the browser had the default CSS-property scroll-behavior: smooth which caused the scroll function to automatically run with requestAnimationFrame() which runs asynchronously. Make sure that the scroll-behavior has the value unset or just overwrite it globally in your CSS like this:

* {
  scroll-behavior: unset
}

I actually just tried and failed to reproduce your problem even with Safari 6.0.5 (on Lion, i.e. OS X 10.7).

You can run this jsfiddle with https://www.browserstack./screenshots to confirm that it works with all Safari versions (5.1, 6.0, 6.1, 7, 8).

Indeed the spec says and I quote:

When a user agent is to perform a smooth scroll of a scrolling box box to position, it must update the scroll position of box in a user-agent-defined fashion over a user-agent-defined amount of time. When the scroll is pleted, the scroll position of box must be position. The scroll can also be aborted, either by an algorithm or by the user.

Unless I am reading it wrong, Safari has its right to give you the old value (or indeed anything) while it is animating the scroll. Therefore your setTimeout approach may not even work fine if the browsers want to take it to the extreme.

Setting scroll top in requestAnimationFrame actually solved my issue in browsers.

本文标签： javascriptDoes windowscrollTo work asynchronously in SafariStack Overflow