0

I am trying to detect the supported version for document.x.scrollTop for the browser. I have the following code:

var scrollTopElem = document.documentElement;

// Cannot do `document.documentElement.scrollTop || document.body.scrollTop` i.e. `||`
// because if the actual scrollTop is 0 right now, then I won't get the supported `document.x` type.
if (scrollTopElem.scrollTop === 0) {
    var t = scrollTopElem.scrollTop;
    // Add 1 to `scrollTopElem`
    ++scrollTopElem.scrollTop;
    // Check to see if `scrollTopElem` applied the addition.
    // If not, `document.documentElement.scrollTop` isn't supported
    scrollTopElem = t + (1 === scrollTopElem.scrollTop--) ? scrollTopElem : document.body;
}

Which I got from this answer in the first function, scrollTo. I added the comments myself, which I hope is accurate.

The only time t is being used, is to add t + (documentBody || body). That doesn't make sense since t is a number, and (documentBody || body) is an element. So how can you add a number to an element?

My question is: Is the variable t necessary, and what is it doing, what's the point of it? Also, is there a better way to detect the supported document.x.scrollTop?

Is there a better way of detecting which is the supported way?

W3schools does the following (at their last example, the function called myFunction:

document.body.scrollTop + document.documentElement.scrollTop

The 'problem' with that, is that it's kind of hackish. It's not a direct solution, but a roundabout way to answer it. Also, performance-wise, the first way I mentioned is better (i.e. if I will use scrollTop more than once, which I will).

Community
  • 1
  • 1
Jessica
  • 9,379
  • 14
  • 65
  • 136
  • 1
    You've misplaced a parentheses. Addition comes before comparison so the code you've annotated should be `(t + 1 === scrollTopElem.scrollTop--) ? scrollTopElem : document.body`. That means it attempts to increase the value of `scrollTop` on an element. If the increment is successful, you know that each element has a `scrollTop` property so it gives you that element. Otherwise, the body should have a `scrollTop` property so it gives you that instead. – Mike Cluck Sep 07 '16 at 22:36
  • @MikeC We know that `t` will always be 0 (because the if statement). Can't we just remove the `t` variable, and check `(1 === scrollTopElem.scrollTop--`)? – Jessica Sep 07 '16 at 23:09
  • Nope. You're missing the `++scrollTopElem.scrollTop;` line. This is the same thing as writing `scrollTopElem.scrollTop = scrollTopElem.scrollTop + 1`. The idea is that if the browser allows you to add one to an elements `scrollTop` property then per-element `scrollTop` is supported correctly. In some environments, `scrollTop`is read-only on elements which are not the body. If it *did not* allow you to assign a new value to `scrollTopElem.scrollTop`, that means the property is read-only and can't be used to manipulate the individual elements scroll position. – Mike Cluck Sep 08 '16 at 14:47
  • @MikeC Thanks, but my question is, if we remove the line `var t = scrollTopElem.scrollTop;` then we would do the following: `++scrollTopElem.scrollTop; if (0 === tempScrollTopElem.scrollTop--) tempScrollTopElem = document.body;` Because `t` doesn't change, and it will always be 0. – Jessica Sep 08 '16 at 16:37
  • But `t` *won't* be 0 if the element has already been scrolled! – Mike Cluck Sep 08 '16 at 16:39
  • @MikeC True, but since there's an if statement: `if (scrollTopElem.scrollTop === 0) {` it will be 0 – Jessica Sep 08 '16 at 16:53
  • Oh jeez, I'm an idiot. Yes, you're absolutely right. The `if` statement has already proven the `scrollTopElem.scrollTop === 0` therefore `t` will be `0` meaning you can remove `t` entirely. Sorry for wasting your time! – Mike Cluck Sep 08 '16 at 16:55
  • @MikeC No worries! No problem! Ya, the code is kinda confusing. Thanks! – Jessica Sep 08 '16 at 17:08

0 Answers0