PositionObserver
The tool that can easily replace most of your scroll and resize event listeners. Simple design and easy to use.
Installation
Usage
importPositionObserverfrom '@thednp/position-observer';consttarget = document.getElementById('myElement');constobserver =newPositionObserver((entries, currentObserver) => {constentry = currentObserver.getEntry(target);if(entry.isVisible) console.log('myTarget is visible!');elseconsole.log('myTarget is NOT visible!') }); observer.observe(target);
Example
In this example these tooltips will stick to their trigger button while you scroll up and down
or resize the window. First is handled by via the PositionObserver callback, while the second is handled by
both scroll and resize event handlers. Both callbacks are wrapped in a requestAnimationFrame
wrapper and both event listeners are set as passive, just to make sure we have a fair comparison.
Click one of the buttons below and start scrolling and or resize the window for a couple of seconds. After 500 updates, an average and a maximum execution time in microseconds will be calculated and displayed in the middle of the page somewhere.
In this example this tooltip will stick to the button via the PositionObserver callback. You will notice that the average execution time while scrolling is slightly faster and even faster while resizing.
In this example this tooltip will stick to the button via the scroll and or resize event handlers. You will notice that the average execution time while scrolling is slightly slower and considerably slower while resizing.