Is there an option to hide the scrollbar if the ToC doesn't reach certain size? Or just hide in general?

[aegonwolf]

Hi Janosh,

Using your awesome Plugin for another project again. Thought this might be a nice enhancement if it isn't already available. I couldn't find anything in the docs so I thought it wasn't, apologies if it already is an option, in which case I'd be super grateful if you could let me know how :-)

[janosh]

Scrollbars are vendor and/or OS dependent. Are you on Windows? On mac, they are hidden by default. Feel free to share a screenshot just to confirm we're talking about the same thing. Maybe this SO answer helps?

[aegonwolf]

I am on Windows. I wasn't aware this is an OS thing. I don't see them on all types of pages though, but for svelte-toc I always see them. I have this issue on Firefox, Chrome, and Edge.

See the screenshot below, I've highlighted in yellow what I mean. I tried the solution from GitHub and I tried the overflow directives from Tailwind, but I can't get rid of it.

this prop provided by you has worked instead: --toc-overflow="auto". So, for anyone else: <Toc --toc-overflow="auto"/> works! Thanks a lot!

[janosh]

Many other sites probably use custom CSS to hide scroll bars in all browsers which is why you don't see them. Something like (from here)

<style>
  .container {
      -ms-overflow-style: none;  /* Internet Explorer 10+ */
      scrollbar-width: none;  /* Firefox */
  }
  .container::-webkit-scrollbar { 
      display: none;  /* Safari and Chrome */
  }
</style>

I'm not opposed to that in svelte-toc. Happy to take a PR that adds these rules via overridable CSS custom variables.

[matfantinel]

I just used --toc-overflow: auto; to hide it on mine, and make it correctly only show up if there is a need to scroll.