Beautify Native Scrollbar With Custom CSS – Slim-scroll

Category: Javascript | January 17, 2020
Author: kamlekar
Views Total: 2,086 views
Official Page: Go to website
Last Update: January 17, 2020
License: MIT

Preview:

Beautify Native Scrollbar With Custom CSS – Slim-scroll

Description:

Slim-scroll is a Pure JavaScript plugin to replace the native browser scrollbar with one that can be easily customized via CSS.

How to use it:

1. Download and insert the slimscroll.min.js into the HTML document.

<script src="/path/to/dist/slimscroll.min.js"></script>

2. Create a scrollable container.

<div class="slimScroll">
  Long Content Here
</div>
.slimScroll {
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 200px; 
  width: 380px;
}

3. Apply the plugin to the scrollable container.

var element = document.querySelectorAll('.slimScroll');
var instance = new slimScroll(element, {
    'wrapperClass': 'scroll-wrapper unselectable mac',
    'scrollBarContainerClass': 'scrollBarContainer',
    'scrollBarContainerSpecialClass': 'animate',
    'scrollBarClass': 'scroll'
});

4. Apply your own CSS styles to the scrollbar.

.wrapper, .scroll-wrapper {
  padding: 5px;
}

.scroll-wrapper.mac + .scrollBarContainer{
  background-color: transparent;
}

.scrollBarContainer.animate .scroll{
  transition: 2s opacity ease;
  -ms-transition: 2s opacity ease;
  opacity: 0;
}

.scrollBarContainer:hover .scroll{
  opacity: 0.5;
  transition: none;
  -ms-transition: none;
}

.unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}

.scroll{
  border-radius: 10px;
}

.wrapper + .scrollBarContainer{
  background-color: #eee9ee;
}

5. Set the height of the scrollbar.

var element = document.querySelectorAll('.slimScroll');
var instance = new slimScroll(element, {
    scrollBarMinHeight: '',
    scrollBarFixedHeight: ''
});

You Might Be Interested In:


Leave a Reply