feat: Add scrollbars-styling
This commit is contained in:
Mattia Astorino
71
index.html
71
index.html
@ -31,6 +31,7 @@
|
|||||||
<a class="sidebar__link" href="#overflow-scroll-gradient">Overflow scroll gradient</a>
|
<a class="sidebar__link" href="#overflow-scroll-gradient">Overflow scroll gradient</a>
|
||||||
<a class="sidebar__link" href="#popout-menu">Popout menu</a>
|
<a class="sidebar__link" href="#popout-menu">Popout menu</a>
|
||||||
<a class="sidebar__link" href="#pretty-text-underline">Pretty text underline</a>
|
<a class="sidebar__link" href="#pretty-text-underline">Pretty text underline</a>
|
||||||
|
<a class="sidebar__link" href="#scrollbars-styling">Scrollbars styling</a>
|
||||||
<a class="sidebar__link" href="#shape-separator">Shape separator</a>
|
<a class="sidebar__link" href="#shape-separator">Shape separator</a>
|
||||||
<a class="sidebar__link" href="#system-font-stack">System font stack</a>
|
<a class="sidebar__link" href="#system-font-stack">System font stack</a>
|
||||||
<a class="sidebar__link" href="#triangle">Triangle</a>
|
<a class="sidebar__link" href="#triangle">Triangle</a>
|
||||||
@ -918,6 +919,76 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="snippet">
|
||||||
|
<h3 id="scrollbars-styling">Scrollbars styling</h3>
|
||||||
|
<p>Customise scrollbars style for the document and elements with overflow scrollable, on webkit platforms.</p>
|
||||||
|
<h4 data-type="HTML">HTML</h4><pre><code class="lang-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>
|
||||||
|
</code></pre>
|
||||||
|
<h4 data-type="CSS">CSS</h4><pre><code class="lang-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);
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h4 data-type="Demo">Demo</h4>
|
||||||
|
<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>
|
||||||
|
<h4 data-type="Explanation">Explanation</h4>
|
||||||
|
<ol>
|
||||||
|
<li><code>::-webkit-scrollbar</code> target the whole scrollbar element.</li>
|
||||||
|
<li><code>::-webkit-scrollbar-track</code> target only the scrollbar track.</li>
|
||||||
|
<li><code>::-webkit-scrollbar-thumb</code> Allow you to target and style the scrollbar thumb.</li>
|
||||||
|
</ol>
|
||||||
|
<p>There are many other pseudo elements that you can use to style scrollbars. More info about this on the
|
||||||
|
<a href="https://webkit.org/blog/363/styling-scrollbars/" target="_blank">WebKit Blog</a>
|
||||||
|
</p>
|
||||||
|
<h4 data-type="Browser support">Browser support</h4>
|
||||||
|
<div>
|
||||||
|
<div class="snippet__browser-support">
|
||||||
|
87.3%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p><span class="snippet__support-note">⚠️ Currently scrollbar styling doesn't appear to be on any standards track.
|
||||||
|
</span></p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://caniuse.com/#feat=css-scrollbar" target="_blank">https://caniuse.com/#feat=css-scrollbar</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
<div class="snippet">
|
<div class="snippet">
|
||||||
<h3 id="shape-separator">Shape separator</h3>
|
<h3 id="shape-separator">Shape separator</h3>
|
||||||
<p>Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.</p>
|
<p>Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.</p>
|
||||||
|
|||||||
78
snippets/scrollbars-styling.md
Normal file
78
snippets/scrollbars-styling.md
Normal 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
|
||||||
Reference in New Issue
Block a user