透明背景滚动条显示在内容之上

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

在css文件中进行一些更改，请使用此代码

.dropdown-menu::-webkit-scrollbar-track {
    background-color: #E0E0E0;
}

请记住从代码中删除display: none;属性或将其更改为display: block;

Answer 2

http://manos.malihu.gr/jquery-custom-content-scroller/
这个插件工作得很好。建议！易于修改！

Answer 3

只需将正文标记中的单位从％切换为 vw 即可 你将获得超量内容的效果。

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

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