0

I have searched high and low for an answer for this question and I FINALLY found it. I am writing this to hopefully save a future programmer a lot of time and frustration.

Please comment below if you would like to see something added or have any questions and I will add it. This will become a more complete answer as people bring forth issues.

Noah Gary
  • 916
  • 12
  • 25
  • 6
    if you really think that this can help anyone and for this reason you have wrote it, then you should paste the solution as an answer,, not in question – A.B Apr 17 '15 at 19:51
  • 1
    Your heart is in the right place :) - it's only your solution that is not... – LcSalazar Apr 17 '15 at 19:53
  • 1
    Furthermore , you will need to mark it accepted in order to get the (answered) effect... – A.B Apr 17 '15 at 19:56
  • I have moved the solution to the answer section. Thanks. I cannot accept my own answer for two days so... until then. – Noah Gary Apr 17 '15 at 19:56
  • please vote me back up if I have corrected the problem you down voted me for. – Noah Gary Sep 25 '15 at 21:24

1 Answers1

9

This is a solution to find/detect the scroll bar position on the three major browsers(IE, Chrome, Firefox). Let me know if you find a version of these browsers that will not work and I will edit this answer to include that info.

Older versions of chrome:
var scrollTop = document.body.scrollTop; //Chrome
var scrollLeft = document.body.scrollLeft; //Chrome

Chrome > v.78.0.3904.97 (That I know of)
var scrollTop = window.scrollY; //Chrome
var scrollLeft = window.scrollX; //Chrome

Other Browsers:
var otherScrollTop = document.documentElement.scrollTop; //IE & Firefox
var otherScrollLeft = document.documentElement.scrollLeft; //IE & Firefox

These variables will detect the scroll position for the whole page.

As @Eloy Pineda Mentioned: You can write this more concisely with:

var scrollTop = window.scrollY || document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = window.scrollX || document.body.scrollLeft || document.documentElement.scrollLeft;
Noah Gary
  • 916
  • 12
  • 25
  • I upvoted this and then ended up using jquery, as in [this answer](http://stackoverflow.com/questions/7392058/more-efficient-way-to-handle-window-scroll-functions-in-jquery/7392655#7392655). If anyone else runs into this issue it might be an option – Jess Oct 26 '15 at 02:42
  • 1
    Jquery definitely makes it easier. At the time I was in a position where I needed a JavaScript only solution. Thanks for the up vote! – Noah Gary Oct 27 '15 at 03:16
  • 2
    @Goahnary, great answer. I agree this is the best solution today. Just 2 little things to add: (1) I think you can make it even more concise in just one line: `var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;`. (2) I think this will work on IE9+, maybe not super important, but I think worth mentioning :) – Eloy Pineda Nov 28 '15 at 22:56
  • I don't think this works anymore. In Chrome `document.body.scrollTop` is always returning `0` for me. – flyingL123 Nov 09 '19 at 18:49
  • @flyingL123 I can see it is working when I reference it in the console. It should still be working. – Noah Gary Nov 12 '19 at 18:18
  • @NoahGary really? What version of Chrome? I'm using `Version 78.0.3904.97 (Official Build) (64-bit)` on a Mac, and it returns 0 no matter where I am scrolled. – flyingL123 Nov 17 '19 at 13:58
  • @NoahGary yea looks like this is the new expected behavior: https://bugs.chromium.org/p/chromium/issues/detail?id=766938 – flyingL123 Nov 17 '19 at 14:00
  • 1
    @flyingL123 I have updated my answer. Thanks for pointing that out. – Noah Gary Nov 18 '19 at 18:18