Native JavaScript Scrolling Plugin (Original)
Add-ons
Plugin Description: A scrollbar compatible with IE8 and later, as well as mobile devices.
Last Updated: 2021-03-08 21:55:16
Changelog:Fixed a bug in scrollbox percentage-based height settings and added logic to hide the scrollbar when the content height does not exceed the container height.
Last Updated: 2021-02-07 23:09:39
Usage
Step 1: Import CSS and JS
Step 2: Create four nested DOM elements
1 2 3 4 5 6 7 8 9 10 | <div id="scrollbox"><div><div> <div class="list"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> ... </div></div></div></div> |
Step 3: For vertical scrolling, set the maximum height or height.
1 2 3 4 | overflow: hidden;#scrollbox { max - height: 600 px; overflow: hidden;} |
Step 4: Create the scrollbar object
1 | var oScrollbar = new TScrollBar('#scrollbox'); |
For horizontal scrolling, set the width during initialization.
1 2 3 4 | var oScrollbar = new TScrollBar('#scrollbox', { direction: 'horizontal', width: 1000}); |
评论