How can I hide the scrollbar during viewport.scrollTo?

[freedomwebcn]

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]

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).

[earlwilson]

@KingSora Does this work the same way for the Vue version of OS? I can get this code snippet to work for vanilla JS but it does not work when using the Vue stackblitz example.

const bodyOsInstance = getBodyOverlayScrollbarsInstance();
bodyOsInstance.options({
  scrollbars: {
    visibility: 'hidden',
  },
});

The above code does not change the visibility of the scrollbars. But again, when I implement it in the vanilla JS example app, it does indeed work. Is there anything I am missing?

[KingSora]

@earlwilson Hard to say why it isn't working... can you post a minimal example on stackblitz / codesandbox / jsfiddle? I would adapt it and send it back to you.