The page width be changed when y scrollbar appears cause bad ux

[wbxl2000]

Describe the bug

When the vertical scroll bar appears in some long content pages, the page width changes, which results in a bad user experience.

Maybe add placeholder space for the scrollbar?

https://github.com/user-attachments/assets/e43a537c-6e7c-4880-99bb-5c8ac7d39f2e

Reproduction

https://vitepress.dev/reference/default-theme-carbon-ads

compare to

https://vitepress.dev/reference/default-theme-search

Expected behavior

the content width don't be changed, which means the toc's and nav bar's position will not change.

System Info

all

Additional context

No response

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[wbxl2000]

Here is an article describing this.

[brc-dd]

Duplicate of #1054

[wbxl2000]

Got it, thanks.

For others encountering this issue, I share my way to "fix" it.

/* .vitepress/theme/custom.css */
html {
    overflow-y: scroll;
}

body::-webkit-scrollbar{
  width:10px;
  height:10px;
}
body::-webkit-scrollbar-track{
  background: #fff;
  border-radius:2px;
}
body::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
body::-webkit-scrollbar-thumb:hover{
  background: #333;
}
body::-webkit-scrollbar-corner{
  background: #179a16;
}