Author: | seanhay |
---|---|
Views Total: | 55 views |
Official Page: | Go to website |
Last Update: | April 25, 2023 |
License: | MIT |
Preview:

Description:
exScroll is a JavaScript library that attaches a responsive, customizable scrollbar to the container whose inner content is overflowed.
How to use it:
1. Insert the stylesheet exscroll.css and JavaScript exscroll.js into the document.
<link rel="stylesheet" href="./dist/exscroll.css" /> <script src="./dist/exScroll.js"></script>
2. Add the scrollbar to the container.
<div exscroll> <div exscroll-content>Inner Content</div> <div exscroll-scrollbar></div> </div>
3. Initialize the exScroll and done.
let scroller = new exScroll(); exScroll();
4. Override the default selectors.
<div class="wrapper"> <div class="content"> <div class="inner"></div> </div> <div class="scrollbar"></div> </div>
let scroller = new exScroll({ wrapperName: ".wrapper", contentName: ".content", scrollerName: ".scrollbar", }); exScroll();
5. Override the default styles of the scrollbar.
.exscroll-scrollbar { box-sizing: border-box; margin-top: 20px; width: calc(100% - 100px); margin-left: 50px; height: 12px; padding: 2px; border-radius: 9999px; background-color: #fff; border: 1px solid #aaa; position: relative; } .exscroll-dragger { display: block; width: 40px; height: 100%; background-color: #aaa; border-radius: 9999px; position: absolute; top: 0; cursor: pointer; }
Changelog:
v1.2.0 (04/25/2023)
- Bugfix