Custom scrollbars
npm install @tis-cca/browser-styles
Usage
Custom scrollbars allow to style the default browser scrollbars.- Style a scrollbar with mixins:
- Make sure you import the
npm install @tis-cca/browser-stylesNPM package. - Include the mixin
@include tca-scrollbarin your code, on an element that has an overflow scroll behavior. - Style a scrollbar by using css classes:
- Make sure you import the
npm install @tis-cca/browser-stylesNPM package. - Add the class
tca-scrollbaron a DOM element. Any element that has an overflow scroll behavior is possible.
Variants
- Scrollbars can be shown either with- or without buttons.
- The default does not show buttons!
- If you want buttons to be shown, you need to add one of these modifiers:
@include tca-scrollbar--buttons-visible- css class:
tca-scrollbar--buttons-visible
- The background of the scrollbar (track) is hidden by default but can be shown.
- The default does not show a background (track)!
- If you want the track to be shown, you need to add one of these modifiers:
@include tca-scrollbar--track-visible- css class:
tca-scrollbar--track-visible
Title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis non, inventore incidunt repudiandae id vel nisi officiis provident iste necessitatibus. Ex recusandae eveniet tempora.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis non, inventore incidunt repudiandae id vel nisi officiis provident iste necessitatibus. Ex recusandae eveniet tempora.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis non, inventore incidunt repudiandae id vel nisi officiis provident iste necessitatibus. Ex recusandae eveniet tempora.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis non, inventore incidunt repudiandae id vel nisi officiis provident iste necessitatibus. Ex recusandae eveniet tempora.
<div class="tca-button-group">
<button class="tca-button" onclick="ToggleScrollbar()">Toggle scrollbar</button>
<button class="tca-button" onclick="ToggleScrollbarTrack()">Toggle scrollbar track</button>
<button class="tca-button" onclick="ToggleScrollbarButtons()">Toggle scrollbar buttons</button>
</div>
<div style="max-height: 250px; padding: 1rem; overflow-y: auto;" id="tca-scrollbar-demo">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis non, inventore incidunt repudiandae id vel nisi officiis provident iste necessitatibus. Ex recusandae eveniet tempora.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis non, inventore incidunt repudiandae id vel nisi officiis provident iste necessitatibus. Ex recusandae eveniet tempora.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis non, inventore incidunt repudiandae id vel nisi officiis provident iste necessitatibus. Ex recusandae eveniet tempora.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis non, inventore incidunt repudiandae id vel nisi officiis provident iste necessitatibus. Ex recusandae eveniet tempora.</p>
</div>
<script>
function ToggleScrollbar() {
var x = document.getElementById('tca-scrollbar-demo');
x.classList.toggle("tca-scrollbar");}
function ToggleScrollbarButtons() {
var x = document.getElementById('tca-scrollbar-demo');
x.classList.toggle("tca-scrollbar--buttons-visible");}
function ToggleScrollbarTrack() {
var x = document.getElementById('tca-scrollbar-demo');
x.classList.toggle("tca-scrollbar--track-visible");}
</script>