Its simple sidebar which helps to navigate on web page.
It is not a replacement of Default Browser Scrollbar. It's an addition to it.
Check example on believer-ufa.github.io/clever-scrollbar/
Add library script
<script src="dist/clever-scrollbar.js"></script>Or install from NPM as module:
npm i clever-scrollbarAdd additional attributes to main sections on you page
<body>
<div class='head' data-content-block="Header">...</div>
<div class='article-content' data-content-block="Article text">...</div>
<div class='comments' data-content-block="Users's comments">...</div>
</body>And execute CleverScrollbar.load() method after loading all content!
window.addEventListener("load", function() {
CleverScrollbar.load()
})This is all of you need.
If you want to prevent loading default styles of library, you can use this approach:
CleverScrollbar.load({
loadStyles : false
})If you need to set some additional classes to one of blocks of sidebar, you can do this with additional attribute:
<div
class='article-content'
data-content-block="Article text"
data-content-block-classes='main-content-block other-class'
>...</div>
If you webpage content changed withoud full reload, you can use method CleverScrollbar.reload()
to update you sidebar.
Run CleverScrollbar.stop() to disable library. You can load it again later.