I thought $(window).scrollTop would tell me by how much I had scrolled, but...

If I scroll a bit, I'll get:

$(window).scrollTop(): 0
$('#react-root')[0].scrollTop: 0
$('#react-root')[0].getBoundingClientRect().top: -450 // that seems to be correct

#react-root being directly attached to the body, and containing everything. Is it how things are supposed to happen?

==== Edit ===

Ok I happened to have an unusual overflow settings:

html {
  overflow: hidden;
  height: 100%;
}

body {
  height: 100%;
  overflow: scroll;
}

That I did to avoid over scrolling () and forgot about it.

Here is a jsfiddle that reproduces the issue / where none of the elements has a positive scrolltop, while scrolling do happen

==== Goal ====

In the setting described by the jsfiddle, I'm interested to get the scroll offset (it seems that getBoundingClientRect returns it) and be able to reset the scroll position to the top.

I thought $(window).scrollTop would tell me by how much I had scrolled, but...

If I scroll a bit, I'll get:

$(window).scrollTop(): 0
$('#react-root')[0].scrollTop: 0
$('#react-root')[0].getBoundingClientRect().top: -450 // that seems to be correct

#react-root being directly attached to the body, and containing everything. Is it how things are supposed to happen?

==== Edit ===

Ok I happened to have an unusual overflow settings:

html {
  overflow: hidden;
  height: 100%;
}

body {
  height: 100%;
  overflow: scroll;
}

That I did to avoid over scrolling (https://stackoverflow./a/17899813/2054629) and forgot about it.

Here is a jsfiddle that reproduces the issue https://jsfiddle/7ugf4jm5/7/ where none of the elements has a positive scrolltop, while scrolling do happen

==== Goal ====

In the setting described by the jsfiddle, I'm interested to get the scroll offset (it seems that getBoundingClientRect returns it) and be able to reset the scroll position to the top.

• javascript
• scroll
• reactjs

• I've written method that may resolve your problem here: stackoverflow./questions/36671044/… – Przemysław Melnarowicz Commented Apr 20, 2016 at 19:15
• Thanks, I think $('#react-root')[0].getBoundingClientRect().top returns the correct position in my case, but I'd like to understand why $(window).scrollTop() is not working – Guig Commented Apr 20, 2016 at 19:21
• You mean $('#react-root')[0].scrollTop === 0, window in that case is not scrollable. I would need an example to have any idea what's happening there. – Przemysław Melnarowicz Commented Apr 20, 2016 at 19:23
• Ok I happened to have some weird overflow settings, in the html and body tags... Thanks for the attention – Guig Commented Apr 20, 2016 at 19:30

1 Answer 1

I made this fiddle to show you an example: https://jsfiddle/7ugf4jm5/

Inner Element in Fiddle

When scrolling the inner element:

console.log("Inner ID: " + $('#inner')[0].scrollTop);
console.log("Window: " + $(window).scrollTop());
console.log("Inner ID Bound: " + $('#inner')[0].getBoundingClientRect().top);

Will output:

Inner ID: 555.5555702727522
Window: 0
Inner ID Bound: 7.986111640930176 --> Only because there is a slight padding at the top of the element

Outer Element In Fiddle

console.log("React ID: " + $('#react-root')[0].scrollTop);
console.log("Window: " + $(window).scrollTop());
console.log("React ID Bound: " + $('#react-root')[0].getBoundingClientRect().top);

Outputs:

React ID: 0
Window: 666.6666843273026
React ID Bound: -658.6806030273438

$(window).scrollTop() will work when the browser is being scrolled. If you have your react-root set to overflow scroll, it will stay positioned at the top of the window so the window is not what is getting scrolled. You can see this example with the element outlined in red in my fiddle.

However, if you scroll the window, both the react-root and window scroll tops are calculated. They differ slightly but that can be due to the time at which each is called in the browser being slightly different (one is essentially called after the other..just at a very tiny difference in time).

The scrollTop and getBoundingClientRect() are sign inverses of eachother in this case.