49

It seems body.scrollTop (and body.scrollLeft) are deprecated in ES5 strict-mode. What is the reason for this, given that it still seems okay to use these properties on other DOMElements?

Background Info:

I have a function that tries to increase (or decrease, as specified) the scrollTop values of all the ancestors of an element, till one of these actually changes. I am wondering if, to stay complaint with strict-mode, I should specifically check against the body element as the chain of parents moves upward.

[Obviously, bodyrefers to document.body]

Himanshu P
  • 9,586
  • 6
  • 37
  • 46
  • 4
    What makes you think strict mode has any effect on this? The ECMAScript specification is unrelated to the host objects that the browser makes available in the browser environment (one of the several environments in which JavaScript might be used), and strict mode cannot change them. – T.J. Crowder Oct 28 '13 at 12:48
  • Oh I did not know that. I am developing a chrome extension and I started getting a bunch of warnings on the console about body.scrollTop being deprecated strict mode (I specify `"use strict";`). This currently happens only on Chrome Canary but I assumed would happen on the stable Chrome release soon enough as well. – Himanshu P Oct 28 '13 at 13:13
  • @T.J.Crowder Is there any way I can avoid the warning messages on the `console` (that I mention in my last comment)?. Also, if the ECMAScript specification is unrelated to this, why does the browser warn about it in the first place? – Himanshu P Oct 28 '13 at 13:51
  • @ Himanshu: Don't use strict mode? As for why Chrome mentions strict mode, they must have their own reasons for disallowing this in Chrome extensions. – T.J. Crowder Oct 28 '13 at 14:10
  • 1
    They mean [standards mode](https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode) (document-rendering mode), not ES5 strict mode. – sam Nov 19 '13 at 00:01
  • I don't know why it is deprecated even if doesn't make a lot of sense to me. however have a look at [this commit](https://github.com/facebook/react/commit/13230a30440e5f1b97b264f6d23c9fa2908a7280) which might clarify how to workaround it. Also, you may have noticed these won't work on mobile (at least iOS) which is terrible. – zanona Jan 16 '14 at 16:37

4 Answers4

49

It's Chrome's own incorrect behavior that is deprecated, and they're warning authors to stop relying on it.

The scrolling viewport is represented by document.documentElement (<html>) in standards mode or <body> in quirks mode. (Quirks mode emulates the document rendering of Navigator 4 and Explorer 5.)

Chrome uses body.scrollTop to represent the viewport's scroll position in both modes, which is wrong. It sounds like they want to fix this so they're encouraging authors to script for the standard behavior.

I don't think you need to change your code. There's nothing wrong with using body.scrollTop in standards mode so long as you understand it represents the scroll position of body only (typically 0, unless you've given body a scroll box).

You can see the warning by executing document.body.scrollTop in the console:

body.scrollTop is deprecated in strict mode. Please use documentElement.scrollTop if in strict mode and body.scrollTop only if in quirks mode.

sam
  • 40,318
  • 2
  • 41
  • 37
27

I noticed my code stop working on newer versions of Chrome. I fixed it by using window.scrollY

Before:

var scrollTop = document.body.scrollTop;

Now:

var scrollTop = window.scrollY;

It works all the time now. You can find more documentation here.

Also, I was using:

document.body.scrollTop = 0;

now I replaced it with:

window.scrollTo(0, 0);
Adrian
  • 9,102
  • 4
  • 40
  • 35
3

The following code works for me to set the popup in a correct position whenever the click event fires, for all browsers.

var scrollTop = window.scrollY; //For all browsers.
var scrollTop = document.body.scrollTop; //This works for only IE Edge specific versions
Ryan Schaefer
  • 3,047
  • 1
  • 26
  • 46
Lakshmi Narayana
  • 31
  • 1
-4

scrollTop refers to how much the element is scrolled. This means body shouldn't have a scrollTop because it is never scrolled, body has the topmost scrollbar so it's contents can be scrolled but not body itself.
The last picture on this page explains a lot:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

Marvin Brouwer
  • 306
  • 3
  • 13
  • 1
    If you check on the console, `document.body.srollTop` has a value equal to how many pixels the page is scrolled from the top. – Himanshu P Oct 28 '13 at 13:15
  • 1
    My apologies, I have always understood that body shouldn't have scrollTop. Apparently I'm wrong. – Marvin Brouwer Oct 28 '13 at 14:23
  • @MarvinBrouwer you're actually on the right track… `body.scrollTop` === `0` when the viewport is scrolled in Firefox. – sam Nov 19 '13 at 00:10
  • 4
    I don't think that fact makes me on the right track. If you type document.getElementsByTagName("html")[0].scrollTop You will get the scrolling offset. Apparently Firefox wants to scroll the HTML document instead of the body element. How ever this says nothing about body being able to have a scrollTop or not – Marvin Brouwer Nov 19 '13 at 08:47
  • 2
    -5 points for having the completely correct answer, only chrome was not standards compliant. – Noishe Jun 19 '19 at 00:36