Use native scroll

[ehsan-shv]

Motivation

smooth-scroll library is an amazing library for developing creative web apps but because this library uses a virtual scroll to translate content this makes some performance issues, especially on touch devices.

Proposal

Recently GSAP introduced a plugin named "smoothscroll". In this plugin, they use native scroll for smooth scrolling. Is this possible to refactor this library to use native scroll?

[sadeghbarati]

FYI @idiotWu

https://greensock.com/scrollsmoother/

ScrollSmoother gsap club product

https://www.youtube.com/watch?v=_-_JCocqNbw

[idiotWu]

Wait...just found this on the plugin page from the inspector:

So they are actually using 3d transformations instead of "leveraging native scrolling"?

---

Edit: well, it seems they adjust the body's height corresponding to the scroller's height, and when the body scrolls, they apply 3d transformations to the scroller accordingly – isn't that meaningless?

[idiotWu]

Yeah, I've always been thinking about the same thing. However, it will become completely another plugin if we use the native scrollbars, and will be a bit difficult to customize the appearance. Also, as the native scrollbars do not come with smooth scrolling, we still need to interpolate element.scrollTop/scrollLeft which I don't think will be faster than our current implementation that uses translate3d.

P.S. although we can use behavior: 'smooth' in the native scrollTo() method, it might not work as expected when using JS-based scrolling: https://codepen.io/idiotWu/pen/rNJyBOo

[idiotWu]

FYI: you can find different kinds of scrollbar plugins in https://kingsora.github.io/OverlayScrollbars/#!faq

[ehsan-shv]

Thanks for your response! However, translate3d actives GPU but is there a way to do more processe on GPU to improve performance even more? (it's just an idea) In mobile devices when content height increases, the smooth scroll doesn't work well, also in normal height scroll experience is not as well as native scroll experience, and changing dump number with plugin in touch devices doesn't help so much. Maybe a new config for touch devices could help.

[idiotWu]

@ehsan-shv what about adding a useTranslate3d option that uses translate3d if true otherwise uses scrollTop/scrollLeft to avoid GPU consumption?

[idiotWu]

Another idea is to add an abstraction layer that provides a general API set for both native scrollbars and smooth-scrollbar, just like those graphics libraries. For example, it can be implemented as:

class ScrollbarAdapter {
  constructor(useNative: boolean) {};

  update(): void;
  getSize(): ScrollbarSize;
  isVisible(elem: HTMLElement): boolean;

  addListener(fn: ScrollListener): void;
  removeListener(fn: ScrollListener): void;

  scrollTo(x?: number, y?: number, duration?: number, options?: Partial<ScrollToOptions>): void;
  setPosition(x?: number, y?: number, options?: Partial<SetPositionOptions>): void;
  scrollIntoView(elem: HTMLElement, options?: Partial<ScrollIntoViewOptions>): void;
}

In this way, however, we are not able to use the plugin system anymore as it's not available in native scrollbars 😞.

[ehsan-shv]

If you think other problems can be solved, I think there is no need to remove those nodes from DOM. Just displaying none is enough.
Two suggestions to improve the current version's performance; setting will-change: transform to .scroll-content and .scrollbar-thumb. Checking touch event before creating an instance of smoothScrollBar. It gives developers to use the native scroll on mobile devices easily.

[idiotWu]

Two suggestions to improve the current version's performance; setting will-change: transform to .scroll-content and .scrollbar-thumb.

We already apply transform: translate3d(0, 0, 0) to .scroll-content that creates layers for performance optimization, so it's unnecessary to set will-change: transform. IIRC, setting will-change on large layers will cause warnings in some versions of firefox.

My suggestion is to use will-change only when you have to (e.g. significant performance improvement), otherwise it will slow down the rendering.

Checking touch event before creating an instance of smoothScrollBar. It gives developers to use the native scroll on mobile devices easily.

I would like to leave this option to devs :).

[ehsan-shv]

Yeah, that's right. If I will find other inappropriate suggestions I will come back. :))

[idiotWu]

Also, you can create a plugin to add & remove the will-change property automatically 🪄 :

class WillChangePlugin extends ScrollbarPlugin {
  static pluginName = 'willChange';

  transformDelta(delta, _evt) {
    this.scrollbar.contentEl.style.willChange = 'transform';

    return delta;
  }

  onRender(remainMomentum) {
    if (remainMomentum.x === 0 && remainMomentum.y === 0) {
      this.scrollbar.contentEl.style.willChange = '';
    }
  }
}

[ehsan-shv]

Yes yes, it's so helpful. Currently, I'm working on a React library that includes smooth scroll and some scrolling animations with smoothScrollbar and GSAP, I'm going to use this plugin, and when it is published notice you here to check it.

[ehsan-shv]

@idiotWu Hey! I've published react-nice-scroll based on smooth-scrollbar. Would you please check the code and if there is an issue or if you have an idea tell me.

[idiotWu]

Nice work! Just being crazy busy right now. I'll have a look when I get time.

By the way, I'm considering setting up a GitHub organization to maintain official smooth-scrollbar packages (e.g. core lib, plugins, etc). @sadeghbarati @ehsan-shv would you like to join me?

[ehsan-shv]

Yes, why not. I'm going to publish this package for Vue and maybe Svelte. Joining to the Github orgnization will help and make the approach easy.

[sadeghbarati]

Yes me too 😘❤️