element.scrollTop has different behavior across browsers while setting a very large value

Question

I want to scroll to bottom without triggering layout/reflow.

So I tried to set a fixed large number(Number.MAX_SAFE_INTEGER or 1000000000000000) to scrollTop, which caused different behavior across browsers:

Firefox(59.02)/Safari(11.1): scroll to top
Chrome(66.0.3359.139): scroll to bottom

Here's the Example.

Is this a bug or there's something I went wrong...?

score 1 · Answer 1 · answered May 08 '18 at 07:03

1

Instead you can try with scrollTop to the calculated height of the page. It is simpler and straight forward. Steps to follow 1. Find the height of the document / any container div

var containerHeight= $("#box").height();

scrollTop with containerHeight.

document.querySelector('#box').scrollTop = containerHeight;

This will surely work with any behaviour mismatch.

answered May 08 '18 at 07:03

Padmapriya Vishnuvardhan

2,090
13
16

In my case, I don't want to access height in loop because my DOMs are dirty each loop. And that will trigger a reflow/layout everytime. So I tried to give it a fixed number. – Banana-In-Black May 10 '18 at 02:48
Giving a fixed number is not a right idea / solution, particularly if it is responsive. – Padmapriya Vishnuvardhan May 10 '18 at 05:15

score 0 · Answer 2 · answered May 08 '18 at 06:56

0

This could be caused by the different max values for elements across browsers. For instance, in Chrome the limit is 33554428px. A complete list was given here: What's the maximum pixel value of CSS width and height properties?

answered May 08 '18 at 06:56

11AND2

1,067
7
10

element.scrollTop has different behavior across browsers while setting a very large value

2 Answers2