Motivation
When previewing in a browser (e.g. Edge on Windows), the scrollbar automatically hides when not scrolling (overlay scrollbar behavior). However, in the VS Code webview preview, the scrollbar is always visible, taking up space and looking inconsistent with the rest of VS Code's UI.
Description
Add an option (e.g. tinymist.preview.overlayScrollbar) to enable auto-hiding scrollbar in the preview panel. The scrollbar should only appear when the user is actively scrolling, and fade out after a short delay.
This could be achieved with a simple CSS change on the scroll container (#typst-container-main or similar):
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background-color: transparent; transition: background-color 0.3s; }
:hover::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.4); }
More Examples/Questions
- The browser-based preview already has this behavior by default, so the feature would bring consistency across preview environments.
- Should this be a boolean toggle, or follow the system scrollbar preference automatically?
Motivation
When previewing in a browser (e.g. Edge on Windows), the scrollbar automatically hides when not scrolling (overlay scrollbar behavior). However, in the VS Code webview preview, the scrollbar is always visible, taking up space and looking inconsistent with the rest of VS Code's UI.
Description
Add an option (e.g.
tinymist.preview.overlayScrollbar) to enable auto-hiding scrollbar in the preview panel. The scrollbar should only appear when the user is actively scrolling, and fade out after a short delay.This could be achieved with a simple CSS change on the scroll container (
#typst-container-mainor similar):::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background-color: transparent; transition: background-color 0.3s; }
:hover::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.4); }
More Examples/Questions