在 <aside> 上更改滚动条的宽度

Question

<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-left ms-3" id="sidenav-main"></aside>

我有一个旁白，它包含一个滚动条。我希望滚动条更细一些，即宽度会更小。如果我想删除滚动条，我只需要将其设置为“溢出隐藏”即可。但是要更改宽度，我在 bootstrap 中找不到任何内容。谁能帮我？谢谢

Example

Answer 1

你可以这样设计

aside::-webkit-scrollbar {
    width: 3px;
}
aside::-webkit-scrollbar-thumb {
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
 }

隐藏滚动条

/* Hide scrollbar for Chrome, Safari and Opera */
aside::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
aside {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

在 <aside> 上更改滚动条的宽度

Change width of scroolbar on <aside>

html

css

laravel

bootstrap-4