3

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.com/a/17899813/2054629) and forgot about it.

Here is a jsfiddle that reproduces the issue https://jsfiddle.net/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.

Community
  • 1
  • 1
Guig
  • 9,891
  • 7
  • 64
  • 126
  • I've written method that may resolve your problem here: http://stackoverflow.com/questions/36671044/find-javascript-scroll-top-property-without-using-scrolltop/ – Przemysław Melnarowicz Apr 20 '16 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 Apr 20 '16 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 Apr 20 '16 at 19:23
  • Ok I happened to have some weird overflow settings, in the `html` and `body` tags... Thanks for the attention – Guig Apr 20 '16 at 19:30

1 Answers1

5

I made this fiddle to show you an example: https://jsfiddle.net/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.

A.Sharma
  • 2,771
  • 1
  • 11
  • 24
  • Nice work. I've updated your jsfiddle to reproduce what I'm getting, where no element has a satisfying scroll property (jsfiddle.net/7ugf4jm5/3) – Guig Apr 20 '16 at 20:15
  • The issue is that `html` will **never** scrolltop if the overflow is hidden. When you set the html to overflow-y: scroll, you will only see a change in the body element's scrolltop. See the fiddle: http://jsfiddle.net/7ugf4jm5/4/ – A.Sharma Apr 20 '16 at 20:25
  • html will not show the scrollTop value, but the window will which is essentially the same thing: http://jsfiddle.net/7ugf4jm5/6/ – A.Sharma Apr 20 '16 at 20:31
  • Oups for `window` - `html` ok but if I have my inner container takes the full space (http://jsfiddle.net/7ugf4jm5/7/) how can I get the scroll value? And if there is no scroll offset set, while I'm actually scrolling, how can I reset the scroll position as I'd be able to do for usual setting? – Guig Apr 20 '16 at 20:37
  • If the inner div isn't scrollable then get the scrolltop of the parent div in the DOM tree that is scrollable – A.Sharma Apr 20 '16 at 22:52
  • here (http://jsfiddle.net/7ugf4jm5/7/) it seems that no element has a meaningful scrollTop,while the body is scrollable – Guig Apr 21 '16 at 00:09