w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.49k stars 662 forks source link

[cssom-view] Clarify scroll-behavior: "auto" #3497

Open wessberg opened 5 years ago

wessberg commented 5 years ago

In the smooth-scrolling section of the CSSOM-View spec draft, the following is written:

auto The scrolling box is scrolled in an instant fashion

However, as far as I can tell, this is misaligned with every browser implementation of the spec when using the imperative Element.prototype.[scroll|scrollTo|scrollBy|scrollIntoView] or window.[scroll|scrollTo|scrollBy] methods.

Instead, for auto values, the scrollBehavior property value that lives in the CSSOM will be used. If that is also auto, then yes, scrolling will happen in an instantaneous fashion, but if it is smooth, scrolling will be smooth, no matter which ScrollBehavior is provided.

See this Codepen for a simple illustration of this behavior across browsers: https://codepen.io/anon/pen/JwBpVa

From the polyfills I've surveyed, it looks like most of them are interpreting the spec text literally and they are opting out of smooth scrolling if they receive ScrollOptions with behavior: "auto", not taking into account the scrollBehavior in the CSSOM. This looks to me as an indication that the spec text needs some clarification.

This also means that based on current browser implementations, it is possible to smooth scroll an otherwise instantaneous scrolling box by giving an explicit ScrollBehavior to the ScrollOptions of the imperative scroll APIs, but not possible to do the inverse: Instantaneously scroll an otherwise smooth scrolling box.

I think that it would be valuable to either:

1) Clarify this behavior in the spec, or 2) Extend the spec behavior by introducing a third ScrollBehavior called "instant"

gdh1995 commented 5 years ago

Um, I also run into this confusion.

Sadly, I find this: #2146 says:

Currently under section "Changes From 17 December 2013" there is a note: The instant value of scroll-behavior was renamed to auto.

, which means the "instant" is removed intentionally, while no browser has responsed to it (on Chrome 73 and Firefox 65 the "instant" still work as what we expect).

I also suggest that "instant" should get recovered, for easier understanding.

Robbendebiene commented 2 years ago

I also think instant has its use cases. Without instant one cannot "jump scroll" when the CSS property scroll-behavior is set to smooth, because the behavior property of the Element.prototype.[scroll|scrollTo|scrollBy|scrollIntoView] or window.[scroll|scrollTo|scrollBy] methods will fallback to the CSS property even if auto is explicitly set (see spec). This limitation also means that custom JavaScript scroll functions that implement their own smooth scrolling won't work.

JeroenAdam commented 1 year ago

Imagine you're building a search application and you've implemented scrollTo as an action when changing pages, it should be instantly, try going from page 1 to page 2 on google.com, you'll see what I mean. Smooth scroll is just a game spoiler in such a use case.

I'm in that situation and webpack refuses to compile my project, because 'instant' is not part of the spec.

gdh1995 commented 1 year ago

@JeroenAdam nowadays scrollTo and scrollBy support { behavior: "instant"}.

However, scrollIntoView behaves differently on Chromium and Firefox: