The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element's visibility and location relative to the viewport. If your scroll container is an element other than the body you can create a container that creates watchers.

The scroll monitor was designed to be very fast. On each scroll event the DOM is only touched twice, once to find the document height and again to find the viewport top. No variables are declared, nor are any objects, arrays, or strings created. Watchers are very cheap. Create them liberally.

The code is vanilla javascript and has no external dependencies, however the script cannot be put in the head.

Also see the React hooks, React component and the parallax library.
（DeepL翻訳）
スクロールモニターは、要素がビューポートに入ったり出たりするときに、イベントを受け取ることができます。これは、要素を監視してイベントをトリガーするWatcherオブジェクトを使用して行われます。ウォッチャーオブジェクトは、要素の可視性やビューポートに対する位置など、監視する要素に関する情報も持っています。スクロールコンテナが body 以外の要素である場合、ウォッチャーを作成するコンテナを作成することができます。

スクロールモニターは、非常に高速になるように設計されています。各スクロールイベントで、DOMは2回だけタッチされます。1回目はドキュメントの高さを求め、2回目はビューポートの上端を求めます。変数は宣言されていませんし、オブジェクト、配列、文字列も作成されていません。ウォッチャーは非常に安価です。自由に作ってください。
コードはvanilla javascriptで、外部依存はありませんが、スクリプトをheadに置くことはできません。
Reactフック、Reactコンポーネント、parallaxライブラリも参照してください。

https://github.com/stutrek/scrollmonitor