I have a div
with class parent
. It has two children div.title
and div.body
. div.body
is scrollable in y
direction, and div.title
is fixed at the top of div.parent
using absolute
positioning. div.title
must be a translucent element by design. The problem is that a part of the scrollbars get below div.title
. See this screenshot :
And here is the code :
* {
font-family: sans-serif;
box-sizing: border-box;
}
div.parent {
width: 200px;
height: 200px;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 8px;
position: relative;
}
div.title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
z-index: 20;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 20px;
background: rgb(0, 50, 200, 0.3);
color: rgb(0, 50, 200);
border-radius: 8px 8px 0 0;
}
div.body {
padding-top: 60px;
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div.component {
height: 60px;
background: black;
margin: 10px;
}
<div class="parent">
<div class="title">
This is title
</div>
<div class="body">
<div class="component"></div>
<div class="component"></div>
<div class="component"></div>
<div class="component"></div>
<div class="component"></div>
</div>
</div>
Is there a way to get the scrollbars like this, but without sacrifising the transparency effect in div.title
when the content of div.body
is being scrolled:
I recently found that changing a margin-top
property on the pseudo -webkit-scrollbar
and similar selectors does it. This works well on Chromium based web browsers.
* {
font-family: sans-serif;
box-sizing: border-box;
}
div.parent {
width: 200px;
height: 200px;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 8px;
position: relative;
}
div.body {
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 40px;
}
div.title {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 40px;
z-index: 20;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 20px;
background: rgb(0, 50, 200, 0.3);
color: rgb(0, 50, 200);
border-radius: 8px 0 0 0;
}
div.component {
height: 60px;
background: black;
margin: 10px;
}
.body::-webkit-scrollbar {
width: 10px;
}
.body::-webkit-scrollbar-track {
background: transparent;
margin-top: 44px;
margin-bottom: 4px;
border-radius: 8px;
}
.body::-webkit-scrollbar-thumb {
background: #cdcdcd;
border-radius: 8px;
}
<div class="parent">
<div class="title">This is title</div>
<div class="body">
<div class="component"></div>
<div class="component"></div>
<div class="component"></div>
<div class="component"></div>
<div class="component"></div>
</div>
</div>