透明背景滚动条显示在内容顶部 [英] Transparent background scrollbar displays on top of content
本文介绍了透明背景滚动条显示在内容顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想实现这一目标:
我已经实现的目标:
I want to achieve this:
What I already achieve:
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放入元素中,但似乎不起作用。
Does someone have any ideas how I can do that? How can I make the items stay between their container and the container's scrollbar so they looks like the design? I tried putting z-index in the elements but seems not to work.
推荐答案
只需在主体中切换单位标记从%到 vw
,您将获得内容过多的影响。
Just switch the unit in body tag from % to vw and you will get the over content effect.
body {
width: 100vw;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: 0.7em;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: #c0392b;
}
这篇关于透明背景滚动条显示在内容顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文