透明背景滚动条显示在内容顶部答案

【问题标题】：Transparent background scrollbar displays on top of content透明背景滚动条显示在内容顶部
【发布时间】：2017-06-01 12:25:19
【问题描述】：

我想实现这个：

我已经实现的目标：
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 放入元素中，但似乎不起作用。

【问题讨论】：

我改用这个插件。似乎只是 css 方法不起作用。 manos.malihu.gr/jquery-custom-content-scroller

标签： html css webkit

【解决方案1】：

只需将body标签中的单位从%切换到vw 你会得到over content的效果。

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

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

【讨论】：

遗憾的是，这个黑客只适用于body。它不适用于像divs 这样的小东西。

【解决方案2】：

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

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

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

【讨论】：

这与主题无关

【解决方案3】：

http://manos.malihu.gr/jquery-custom-content-scroller/
这个插件很好用。建议！也很容易修改！

【讨论】：