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

Update and rename scrollbars-styling.md to custom-scrollbar.md

Browse Source
This commit is contained in:
atomiks
2018-03-01 18:34:55 +10:00
committed by GitHub
parent 46eb9fbbef
commit 6cbeabcb34
1 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
snippets/scrollbars-styling.md → snippets/custom-scrollbar.md
View File

@ -1,11 +1,11 @@
### Scrollbars styling
### Custom scrollbar
Customise scrollbars style for the document and elements with overflow scrollable, on webkit platforms.
Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
#### HTML
```html
<div class="custom-scroll">
<div class="custom-scrollbar">
<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>
```
@ -31,7 +31,7 @@ Customise scrollbars style for the document and elements with overflow scrollabl
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__scrollbars-styling">
<div class="snippet-demo__custom-scrollbar">
<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>
@ -42,37 +42,36 @@ Customise scrollbars style for the document and elements with overflow scrollabl
</div>
<style>
.snippet-demo__scrollbars-styling {
.snippet-demo__custom-scrollbar {
height: 100px;
overflow: auto;
}
.snippet-demo__scrollbars-styling::-webkit-scrollbar {
.snippet-demo__custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.snippet-demo__scrollbars-styling::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
.snippet-demo__custom-scrollbar::-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 {
.snippet-demo__custom-scrollbar::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
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.
1. `::-webkit-scrollbar` targets the whole scrollbar element.
2. `::-webkit-scrollbar-track` targets only the scrollbar track.
3. `::-webkit-scrollbar-thumb` targets 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/)
There are many other pseudo-elements that you can use to style scrollbars. For more info, visit 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>
<span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span>
* https://caniuse.com/#feat=css-scrollbar