css怎么设置滚动条不挤压页面的宽度

在 CSS 中，如果你不想让滚动条挤压页面的宽度，你可以通过设置滚动条的样式为非默认值，通常是使用 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-track` 选择器针对 WebKit 内核（如 Chrome、Safari 等）的滚动条进行定制，或者使用 `scrollbar-width: none` 来隐藏滚动条，然后手动添加一个可滚动的伪元素来替代。

例如，如果你想创建一个透明且不影响页面宽度的滚动条，可以这样做：

/* 针对 WebKit 内核 */
::-webkit-scrollbar {
  width: 0;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 全局滚动条样式（对于所有现代浏览器） */
.scrollbar-style {
  scrollbar-width: none; /* 隐藏滚动条 */
}

.scrollbar-style ::-webkit-scrollbar {
  display: none; /* 对于 WebKit 内核 */
}

/* 添加一个可滚动的伪元素来模拟滚动条（仅限于非WebKit浏览器） */
.scrollbar-style::-webkit-scrollbar-thumb,
.scrollbar-style::-ms-thumb { /* ms-thumb 是 IE/Edge 使用的选择器 */
  position: relative;
  width: 15px; /* 宽度随意，这里设置为固定的值 */
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* 可调整阴影效果 */
}

.scrollbar-style::-webkit-scrollbar-thumb:hover,
.scrollbar-style::-ms-thumb:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

使用上述样式后，滚动条将不会占用额外的宽度，只会在鼠标悬停或触摸时显示。