html - 透明背景滚动条显示在内容顶部

Question

我想实现这个:

我已经实现的目标:
https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview

.dropdown-menu { //container
    overflow-y: overlay;
    background-color: transparent;
}
.dropdown-menu::-webkit-scrollbar {
    width:10px;
}
.dropdown-menu::-webkit-scrollbar * {
    background:transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
    background:$blue !important;
    border-radius: 6px;
}

有人知道我该怎么做吗？我怎样才能让元素停留在他们的容器和容器的滚动条之间，让他们看起来像设计？我尝试将 z-index 放入元素中，但似乎不起作用。

Answer 1

只需将 body 标签中的单位从 % 更改为 vw你会得到过度内容的效果。

body {
  width: 100vw;
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  width: 0.7em;
  background: transparent;
}
body::-webkit-scrollbar-thumb {
  background: #c0392b;
}