search

KingSora / OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
https://kingsora.github.io/OverlayScrollbars
MIT License
3.78k stars 214 forks source link

How can I hide the scrollbar during viewport.scrollTo? #528

Closed freedomwebcn closed 1 year ago

freedomwebcn commented 1 year ago

I want to create a lyrics scroller and I would like to hide the scrollbar during the scrolling process. I have created a demo where I simulate the lyrics scrolling by clicking a button, and I have added "autoHide: 'leave'" to try to hide the scrollbar, but it doesn't seem to work. Can you please advise me on how to achieve this? thanks。 https://codesandbox.io/s/rough-snowflake-s9ff9d?file=/src/App.vue:695-712

KingSora commented 1 year ago

Good day @freedomwebcn

There isn't any autoHide option which does exactly that. You could do something like this:

instance.options({
    scrollbars: {
      visibility: "hidden",
    },
  });
  viewport.scrollTo({
    top: 500 * index,
    behavior: "smooth",
  });
  setTimeout(() => {
    instance.options({
      scrollbars: {
        visibility: "auto",
      },
    });
  }, 500);

This hides the scrollbars when the scrolling starts and shows them again after 500ms (which should roughly be the duration of the scrolling).