andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add scrollbars-styling

Browse Source
This commit is contained in:
Mattia Astorino
2018-02-28 20:02:06 +01:00
parent 3924646761
commit a3425696c3
2 changed files with 149 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
snippets/scrollbars-styling.md Normal file
View File

@ -0,0 +1,78 @@
### Scrollbars styling
Customise scrollbars style for the document and elements with overflow scrollable, on webkit platforms.
#### HTML
```html
<div class="custom-scroll">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
</div>
```
#### CSS
```css
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
```
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__scrollbars-styling">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
</p>
</div>
</div>
<style>
.snippet-demo__scrollbars-styling {
height: 100px;
overflow: auto;
}
.snippet-demo__scrollbars-styling::-webkit-scrollbar {
width: 8px;
}
.snippet-demo__scrollbars-styling::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
.snippet-demo__scrollbars-styling::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
</style>
#### Explanation
1. `::-webkit-scrollbar` target the whole scrollbar element.
2. `::-webkit-scrollbar-track` target only the scrollbar track.
3. `::-webkit-scrollbar-thumb` Allow you to target and style the scrollbar thumb.
There are many other pseudo elements that you can use to style scrollbars. More info about this on the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/)
#### Browser support
<span class="snippet__support-note">⚠️ Currently scrollbar styling doesn't appear to be on any standards track.
</span>
* https://caniuse.com/#feat=css-scrollbar