There are two ways to start observing an element. The first is to pass the element
reference to the constructor, either using bind:this or using a document.querySelector call. The second is to pass the element's selector to
the constructor. This will use document.querySelector to find the element.
const scroll = new QScrollObserver('#my-element-id')Then, you will be able to watch the reactive properties of the observer using Svelte's $derived or $effect runes or inside the markup directly.
You don't have to worry about cleaning up the observer, as it will be automatically
cleaned up when the element is destroyed. However, if you want to stop observing the
element manually, you can call the destroy method on the observer.
For more control, you can pass options to the constructor: debounce: number,
to specify at what interval is milliseconds the observer should be triggered, and horizontal: boolean to specify if the observer should track horizontal scroll events rather than vertical. By default,
the observer will track vertical scroll events only with no debounce.
For now, the observer only supports observing one direction at a time. If you want to observe both directions, you will need to create two observers, one for each direction. This is subject to change in the future.
The observer has the following properties:
position: The current scroll position of the target element.direction: The direction of the last scroll event.changedDirection: A boolean indicating if the scroll direction has changed
since the last event.delta: The change in scroll position since the last event, i.e the amound
scrolled during the event.inflectionPoint: The point at which the scroll direction last changed.The observer also has a destroy method that can be used to stop observing the target
element and clean up the observer.
{
"position": 0,
"direction": "down",
"changedDirection": false,
"delta": 0,
"inflectionPoint": 0
}