Can't scroll when setting scroll-behavior: smooth on <ScrollContainer> about react-indiana-drag-scroll HOT 12 CLOSED

Fixed in 1.8.1 thanks to @n0099. Closed.

from react-indiana-drag-scroll.

@n0099, why do you need smooth scroll behavior? What do you want to get?

from react-indiana-drag-scroll.

I have many anchor link targeting elements in ScrollContainer, and I don't wanna call scrollIntoView({ behavior: 'smooth' }) manually in the link's onClick handler.

from react-indiana-drag-scroll.

The library changes scrollTop and scrollLeft under the hood. When scroll-behavior is smooth this changes become smooth, so it produces the described scroll lags.

I can use scrollTo method, that give the possibility to redefine scroll behavior, but IE-11 doesn't support it.

Perhaps, I should use scrollTo method when it's available and change scrollTop and scrollLeft otherwise (IE-11 doesn't support smooth scroll behavior, so it won't be problem), but it's need to be sure that there are no browsers that support either scrollTo method or scroll-behavior feature.

from react-indiana-drag-scroll.

      if (container.scrollBy) {
        const scrollBy = {
          left: horizontal ? -(newClientX - this.clientX) : 0,
          top: vertical ? -(newClientY - this.clientY) : 0
        }
        container.scrollBy({ ...scrollBy, behavior: 'auto' })
      } else {
        if (horizontal) {
          container.scrollLeft -= newClientX - this.clientX
        }
        if (vertical) {
          container.scrollTop -= newClientY - this.clientY
        }
      }

I've tested on chrome and firefox with this change, it's still doesn't work, in fact determining behavior: 'auto' doesn't cancel the effect of scroll-behavior: smooth, and it's an expected behavior standardized by CSSOM.

CSSOM draft says:

If the user agent honors the scroll-behavior property and one of the following are true:
behavior is "auto" and element is not null and its computed value of the scroll-behavior property is smooth
behavior is smooth
...then perform a smooth scroll of box to position. Otherwise, perform an instant scroll of box to position.

It's also been mentioned in stackoverflow and webkit developers

But the MDN doc doesn't mention this, it just says: auto: The scrolling happens in a single jump., it's only correct when there's no scroll-behavior: smooth style applied on the scrolling elements. In wild, I've seen some websites use body { scroll-behavior: smooth; } to make all scrolling executed by js is smooth.

According to the previous stackoverflow answer, the only available workaround for compatible elements with scroll-behavior: smooth style is adding scroll-behavior: auto !important; after

So I think there's a lack of 'instant' value of ScrollToOptions in CSSOM to allow using js to perform instant scroll without touching style temporarily.

from react-indiana-drag-scroll.

@n0099 , did you try to sent scroll-behavior to instant? The example. But I'm not sure about its browser support.

from react-indiana-drag-scroll.

@n0099 , did you try to sent scroll-behavior to instant? The example.

It only works with chrome and is undocumented see w3c/webdriver#1449, w3c/webdriver#1493

from react-indiana-drag-scroll.

@n0099, it's pretty sad.

By the way, I've seen your pull request, thanks. It should work, but I need to test it anyway.

from react-indiana-drag-scroll.

@n0099 , did you try to sent scroll-behavior to instant? The example.

It only works with chrome and is undocumented see w3c/webdriver#1449, w3c/webdriver#1493

It might be chrome's backward compatible with the same value of old scroll-behavior: 'instant' style, where did you find this value?

In https://bugzilla.mozilla.org/show_bug.cgi?id=1086948 and w3c/csswg-drafts#2146:

Currently under section "Changes From 17 December 2013" there is a note:
The instant value of scroll-behavior was renamed to auto.
At "13. CSS properties" under "Smooth Scrolling: The scroll-behavior Property" it specifies Value: auto | smooth further saying "auto The scrolling box is scrolled in an instant fashion.". instant has been removed from here.

from react-indiana-drag-scroll.

I've encountered its mention in the translated version of this page. I assume it may be rudiment indeed and the issue in your last message confirms it. But, alas, auto is not the full replacement of instant.

from react-indiana-drag-scroll.

I've encountered its mention in the translated version of this page. I assume it may be rudiment indeed. That issue in your last message confirms it, but, alas, auto is not the full replacement of instant.

So seems mdn just deleted instant in english main version.

Maybe it's firefox who firstly implmented instant value, see this email list: https://lists.w3.org/Archives/Public/www-style/2013Mar/0315.html

So Gecko internally has:

enum ScrollMode { INSTANT, SMOOTH, NORMAL };

INSTANT is what scrollTo and scrollBy do. NORMAL is done as one scroll,
but possibly async. SMOOTH will do smooth scrolling if the user has
that enabled, and behave like NORMAL otherwise.

Then at 2013-12, the css scroll-behaviour: instant rename to auto in the CSSOM, chrome changed this a year later.
https://bugs.chromium.org/p/chromium/issues/detail?id=243871#c38

Rename 'instant' value of scroll-behavior CSS property to 'auto'

This changes the 'instant' value of scroll-behavior to 'auto',
matching a change made in the CSSOM View spec (and also
matching Firefox's implementation).

But chrome doesn't remove behavior: instant of ScrollOptions which firefox does, they might think they're not the same and still useful in such circumstances like now.
There's an answer that used instant value in chromium based edge: https://stackoverflow.com/questions/52276194/window-scrollto-with-options-not-working-on-microsoft-edge/52288796#52288796

from react-indiana-drag-scroll.

@n0099 , did you try to sent scroll-behavior to instant? The example.

It only works with chrome and is undocumented see w3c/webdriver#1449, w3c/webdriver#1493

I've just tested it on firefox, it works like chrome, so gecko still has supported instant value nowadays.

from react-indiana-drag-scroll.