https://github.com/cybercookie/light-scroll
lightweight crossbrowser js scrollbar
https://github.com/cybercookie/light-scroll
Last synced: 3 months ago
JSON representation
lightweight crossbrowser js scrollbar
- Host: GitHub
- URL: https://github.com/cybercookie/light-scroll
- Owner: CyberCookie
- Created: 2017-11-26T16:24:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-27T14:22:52.000Z (over 7 years ago)
- Last Synced: 2025-01-11T15:35:07.942Z (4 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Light scroll
Crossbrowser lightweight (only 3kb) JS scrollbar that you can easily restyle and configure. Light scroll supports all the events that native browser scroll does, such as scrollbar drag/click, arrow keys and mouse wheel scrolling.
## Usage
First you should determine which HTML blocks are supposed to be scrollable and add `lightscroll` attribute to such blocks
````html
````
Since lightscroll init function defined in global window object - you can init lightscroll wherever you want from any corner of your project. Example in your JS code.
````js
var recalculateBlock = window.initLightScroll({
/* options */
})
var dynamicHeightBlock = document.querySelectorAll('[lightscroll]')[0]
setTimeout(() => { recalculateBlock(dynamicHeightBlock) }, 1000)
````
In example above we init lightScroll, calling `window.initLightScroll()`. Since there is no any hooks in browser to track block height change - you should recalculate block that has dynamic height manually.
For such purposes init function returns `recalculateBlock` function. Simply call this function during the phase when height of _lightscroll block_ could be changed passing this lightscroll element.
### options
`speed` - scroll speed when you use arrows and mouse wheel while scrolling.
### styling
You can rewrite scroll styles in your _.css_ file or recompile _.sass_ file using sass compilers.
Light scroll has 3 states. In _.sass_ file it separated into includes as to bring better user experience. In general mouse hovering over scroll elements determine all the states. Here are 3 _sass includes_ that describes all the states:
`scroll-initial` - when mouse is not hover a _lightscroll block_
`scroll-cont-hover` - when mouse is hover _lightscroll block_
`scroll_hover` - when mosue is hover a scroll bar
There is also 4th state you can't controll - scroll bar is hidding completely when _scrollHeigh == clientHeight_ of scroll block, in such cases `scroll-dissabled` class is toggle.
Having cloned the repository you can open _test.html_ in your browser and check how Light scroll works!
> So far Light scroll supports only vertical scroll and only desktop(no touch) devices. It's not a > NPM package yet so just simple copy-paste source JS and CSS to your project
Any suggestions and bug reports are welcomed :)
Have fun