Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wessberg opened this issue Jan 9, 2019 · 4 comments
Open

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

wessberg opened this issue Jan 9, 2019 · 4 comments

Comments

@wessberg
Copy link

wessberg commented Jan 9, 2019

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
Copy link

gdh1995 commented Mar 23, 2019

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.

gdh1995 added a commit to gdh1995/vimium-c that referenced this issue Mar 23, 2019
w3c/csswg-drafts#2146 removes "instant",
but Chrome and Firefox don't follow it.
A further issue for reopening it is:
  w3c/csswg-drafts#3497
@Robbendebiene
Copy link

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
Copy link

JeroenAdam commented Jul 8, 2023

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
Copy link

gdh1995 commented Jul 23, 2023

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

However, scrollIntoView behaves differently on Chromium and Firefox:

  • Chrome 115 ignores { behavior: "instant" } - treats it as "auto" and then query webpage's html { scroll-behavior: xxx } style.
  • Firefox 114 follows { behavior: "instant" } and always scrolls a target element at once.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants