5

Here's an HTML page that displays three square divs in the upper left corner:

window.addEventListener('load', function () {
  console.log('load event has fired')
  window.scrollTo(500, 0);
  // setTimeout(function() { window.scrollTo(500, 0); }, 0);
})
body { height: 100vh }
.bigwidth {
  width: 2000px;
  display: block;
}
.square {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
}
.greenish {
  background-color: #75af99;
}
.redish {
  background-color: #ff9b98;
}
.bluish {
  background-color: #aabbff;
}
.whiteish {
  background-color: #eaeaea;
}
* {
  padding: 0;
  margin: 0;
}
<div class="whiteish bigwidth" style="height:100%;">
    <div class="square greenish" style="left:50px; top:50px;"></div>
    <div class="square redish" style="left:70px; top:70px;"></div>
    <div class="square bluish" style="left:90px; top:90px;"></div>
</div>

Right now the window.scrollTo(500, 0); command that occurs on page load has no effect (tested in safari and Chrome). But if we replace it instead by the line

setTimeout(function() { window.scrollTo(500, 0); }, 0);

(commented out in the above code), the scroll does happen. Why is this?

Kaiido
  • 123,334
  • 13
  • 219
  • 285
Labrador
  • 623
  • 7
  • 13
  • _“that displays three square divs in the upper left corner”_ - if it does, then you should get yourself a better test browser for development purposes first of all - one that is less error tolerant. (Most of your CSS length values are missing the unit.) – CBroe Jun 25 '18 at 12:33
  • @CBroe I don't see how this kind of comment helps anyone/anything. Chrome is a recommended browser for doing dev work, and we're no nearer to answering the original question. If it bothers that the 'px' are missing I suggest you add them yourself next time. – Labrador Jun 25 '18 at 12:53
  • Are you telling me your Chrome displays anything for this defect code? It shouldn’t, and mine doesn’t when I put it here, https://jsfiddle.net/bdLmqtc2/ – CBroe Jun 25 '18 at 12:57
  • The `load` event fires when everyting was _loaded_, that does not mean actually _rendered_. It is most likely not scrolling anywhere, because there simply is no “height” of anything at that moment, that would _allow_ scrolling anywhere in the first place. How a timeout, however short, fixes that, you can read about f.e. here, https://stackoverflow.com/questions/16876394/dom-refresh-on-long-running-function – CBroe Jun 25 '18 at 12:59
  • @CBroe Yes, and also my Safari. (Just re-checked now.) But it doesn't work in the jsfiddle that's true. So I will edit. – Labrador Jun 25 '18 at 13:04
  • @CBroe (edits done). OK. Is there any event I can listen to that promises "honest to God, the page is loaded and rendered"? I am tired of this kind of thing where the API tells me the page is ready, when it really isn't :/ (and by the way note how the timeout has value 0) – Labrador Jun 25 '18 at 13:08
  • That’s not really a new question/issue, check https://www.google.com/search?q=javascript%20event%20when%20page%20is%20fully%20rendered _“(and by the way note how the timeout has value 0)”_ - that is not really relevant; the mere fact that this methodology is used is what “fixes” the problem here, the “length” of the timeout isn’t the deciding factor here. – CBroe Jun 25 '18 at 13:13
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173754/discussion-between-labrador-and-cbroe). – Labrador Jun 25 '18 at 13:27
  • I made a live snippet based on your code, but this snippet doesn't reproduce said issue in any browser for me (Chrome, FF, Safari). Can you confirm if the issue is still present for you? (They may have fixed it since then). – Kaiido Jun 08 '21 at 07:58

0 Answers0