Skip to content

README.md

Latest commit

 

History

History
25 lines (13 loc) · 1014 Bytes

README.md

File metadata and controls

25 lines (13 loc) · 1014 Bytes

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.