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

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，但似乎不起作用。

- phuwin

---

我使用这个插件代替。似乎仅使用CSS方法无法解决问题。http://manos.malihu.gr/jquery-custom-content-scroller/ - phuwin

Answer 1

只需将body标签中的单位从%切换为vw，就可以获得超出内容效果。

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

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

- Losai

---

遗憾的是，这种方法只适用于“body”，而不适用于像“div”这样较小的元素。 - Zdenek

Answer 2

http://manos.malihu.gr/jquery-custom-content-scroller/
这个插件运作得非常好。强烈建议使用！而且很容易修改！

- phuwin

Answer 3

在你的CSS文件中做一些更改，使用这段代码

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

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

- Junaid Amjad

---

这与主题无关。 - godblessstrawberry