https://github.com/kinolag/scroll_handler
Handle scroll events with plain JS
https://github.com/kinolag/scroll_handler
events plain-javascript scroll
Last synced: about 1 year ago
JSON representation
Handle scroll events with plain JS
- Host: GitHub
- URL: https://github.com/kinolag/scroll_handler
- Owner: kinolag
- Created: 2024-08-21T08:13:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-01T15:58:39.000Z (over 1 year ago)
- Last Synced: 2025-01-12T22:46:30.816Z (about 1 year ago)
- Topics: events, plain-javascript, scroll
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# scroll_handler
## Handle scroll events and create custom ones with plain JS
- Keep track of vertical scrolling in your html files.
- Dispatch a custom event when an offset threshold is reached.
- Display the scroll status in the UI (conditionally).
## JS functions
All functionality is implemented with plain JavaScript, HTML and CSS.
`handleScroll` is the function handling the `scroll` event and creating a new event (`scrollProgress`) that is dispatched to window when the vertical offset reaches a certain threshold.
`listenToProgress` is the function called by the custom event listener, which logs the event.detail to the console (or can alert the user)
`handleProgressInUI` is a function (called conditionally) used to display information about the scroll status in the document.
`generateText` is just a function used to populate the demo html file with enough text content to enable vertical scroll.
## How to use it
Clone the repo and open the index.html file in a browser with JS enabled.