CODEWITHSUNDEEP
htmlcsswebkit
phuwin
phuwin

Reputation: 3260

Transparent background scrollbar displays on top of content

I want to achieve this:
enter image description here
What I already achieve:
https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview
enter image description here

.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;
}

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.

Upvotes: 15

Views: 6348

Answers (4)

Mukilan
Mukilan

Reputation: 86

Unfortunately the overflow:overlay has be deprecated in all updated browser versions, use scrollbar-gutter instead. kindly check compatability here

Upvotes: 1

Losai
Losai

Reputation: 329

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;
}

Upvotes: 1

Junaid Amjad
Junaid Amjad

Reputation: 29

Make some changes in your css file use this code

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

remember to remove display: none; property from your code or change it to display: block;

Upvotes: 0

phuwin
phuwin

Reputation: 3260

http://manos.malihu.gr/jquery-custom-content-scroller/
This plugin works pretty well. Suggested! Easy to modify as well!

Upvotes: 0

Related Questions