How to add left and right padding to ::webkit-scrollbar-thumb?
You could try faking the padding with background-clip: padding-box
and applying a transparent border-right and left.
::-webkit-scrollbar {
background: #181818;
width: 20px;
}
::-webkit-scrollbar-thumb {
padding: 0 4px;
border-right:4px solid transparent;
border-left:4px solid transparent;
background: #909090;
background-clip: padding-box;
border-radius: 100px;
&:hover {
background: #606060;
}
}
html,
body {
height: 300%;
}
Faking left and right margins for webkit scrollbar?
All right. Was not so hard, but unfortunately there is a lot of extra html in my solution. Please tell if need comments and/or explanation of something.
Result is below.
.dropdown {
width: 360px;
background-color: green;
padding-bottom: 10px;
max-height: 365px;
margin-bottom: 20px;
}
.itemContainer {
max-height: 355px;
overflow-y: auto;
padding-left: 10px;
padding-top: 10px;
margin-right: 10px;
}
.itemContainer>div {
display: table;
width: 100%;
}
.item {
display: table-row;
}
.item>div{
display: table-cell;
vertical-align: top;
padding-bottom: 10px;
}
.item:last-child>div {
padding-bottom: 0;
}
.item > div:nth-child(1) {
width: 100%;
}
.item>div:nth-child(1)>div{
background-color: white;
padding: 10px;
height: 51px;
}
.item:nth-child(5) > div:nth-child(2) > div {
width: 10px;
}
@media screen {
.itemContainer::-webkit-scrollbar {
width: 6px;
border-radius: 2px;
}
.itemContainer::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: black;
border: solid red 10px;
}
.itemContainer::-webkit-scrollbar-track {
margin-top: 10px;
background-color: yellow;
width: 6px;
}
}
<div class="dropdown">
<div class="itemContainer"><div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
</div></div>
</div>
<div class="dropdown">
<div class="itemContainer"><div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
</div></div>
</div>
CSS vertical scrollbar padding left/right in UL possible?
You can see an example below, basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track.
Quoted from how to customise custom scroll?
body {
min-height: 1000px;
font-family: sans-serif;
}
div#container {
height: 200px;
width: 300px;
overflow: scroll;
border-radius: 5px;
margin: 10px;
border: 1px solid #AAAAAA;
}
div#content {
height: 1000px;
outline: none;
padding: 10px;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: #AAAAAA;
}
<div id="container">
<div id="content" contenteditable>
Click to type...
</div>
</div>
Related Topics
Ckeditor - Prevent Adding Image Dimensions as a CSS Style
Multiple !Important Class Declarations and Precedence
Hiding Table Data Using <Div Style="Display:None">
Chrome 83: Change Colors of New Form Styling
How to Simply Parse a CSS Like (!) File in My Qt Application
Chrome Doesn't Honor Row Height If Rowspan Is Present
How to Style an HTML Select Box to Omit Drop Down Arrow for Print
CSS Sibling Absolute Positioning
What Is the Function of "Overlay" Value of "Overflow" Property
Bootstrap 4, Bg-Inverse Not Showing
CSS - Position: Absolute; - Auto Height
Jsf2 Add Custom Font to CSS Stylesheet
How to Convert a Numeric Value into a Percentage (Or) Append Percentage Symbol to a Number