Open wessberg opened 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.
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.
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.
@JeroenAdam nowadays scrollTo
and scrollBy
support { behavior: "instant"}
.
However, scrollIntoView
behaves differently on Chromium and Firefox:
{ behavior: "instant" }
- treats it as "auto"
and then query webpage's html { scroll-behavior: xxx }
style.{ behavior: "instant" }
and always scrolls a target element at once.
In the smooth-scrolling section of the CSSOM-View spec draft, the following is written:
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]
orwindow.[scroll|scrollTo|scrollBy]
methods.Instead, for
auto
values, thescrollBehavior
property value that lives in the CSSOM will be used. If that is alsoauto
, then yes, scrolling will happen in an instantaneous fashion, but if it issmooth
, scrolling will be smooth, no matter whichScrollBehavior
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
withbehavior: "auto"
, not taking into account thescrollBehavior
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 theScrollOptions
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"