Body can't be used as scroll-container

[dvdrhr]

Hi,

what is the reason for the following if-else-block?

// define scroll context
if (el === d.body) {
  scrollable = w;
  startX = w.scrollX || w.pageXOffset;
  startY = w.scrollY || w.pageYOffset;
  method = original.scroll;
} else {
  scrollable = el;
  startX = el.scrollLeft;
  startY = el.scrollTop;
  method = scrollElement;
}

If i'm not totally wrong it prevents us from using the body as scroll container. But i need the body to be the scroll-container because i dynamically remove some DOM elements while runtime what leads to a flickering behaviour in safari / edge when document is the outer scrolling container. Using an inner div as scroll-container doesn't work either because this breaks the mobile browsers feature of hiding the url-bar on scroll... using the body is the only possibility :)

So... is there a good reason for always using the window as scroll container instead of the body (like the code above does) or is it save to remove this if-block?

[jeremenichelli]

I guess we crawl up the DOM tree to find the closest scrollable parent and we imperatively sotp at body, so we use this element as signal to whether we need to rely on scrollX and scrollY or scrollLeft and scrollTop as initial starting points. So, no it is not safe, you need to be aware whether you are scrolling the window or an element that is scrollable.

We could stop at documentElement but it doesn't change much, at the end we need to use the window's default scroll method. The animation mechanism needs the right starting point as it ignores whether you are scrolling in a container or the window, it just tweens values using requestAnimationFrame.

If you have a case where body is scrollable, but fixated in viewport metrics, I would like to see an example and how it behaves on browsers that already implemented the spec, but it could be an edge case for sure.

[dvdrhr]

Here is an example https://jsfiddle.net/5L1bosc4/

Using the polyfill would lead to the button doing nothing because "body" would be replaced by "window" and on that level there is nothing to scroll.

[jeremenichelli]

Oh ok, now I see it here I'm forcing the polyfill for comparison: https://jsfiddle.net/cqfgvn4b/2/

The error though is not on that condition, but on the fact that we stop at body on the scrollable parent instead of using documentElement, that condition needs to stay there but point to documentElement too.

I'll try to wrap a fix this week 🙏 should be easy.

[dvdrhr]

Sorry... Closed by accident.