Clever Scrollbar
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/
Setup
- Add library script
<script src="dist/clever-scrollbar.js"></script>- Add 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.
Additional classes
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>
Ajax and SPA applications
If you webpage content changed withoud full reload, you can use method CleverScrollbar.reload()
to update you sidebar.
Stopping
Run CleverScrollbar.stop() to disable library. You can load it again later.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent