scrollbar-observer

Observe the appearance and disappearance of the scroll bar of an element

Installation

npm i scrollbar-observer

useage

const dom = document.getElementById('want-to-observer');

const scrollbarObserver = new ScrollbarObserver(
  dom,
  (event: ScrollObserverEvent, preStatus: ScrollObserverEvent) => {
    if (event.scrollX) {
      console.log('A scroll bar appears in the horizontal direction');
    }
    if (event.scrollY) {
      console.log('A scroll bar appears in the vertical direction');
    }
  }
);
// Cancel the observation and destroy the observer
scrollbarObserver.dispose();

Under normal circumstances, the program automatically updates the observation strategy according to the changes in the observed dom (such as the addition and removal of child elements).

But sometimes it will fail (for example, the browser does not support the MutationObserver API), you can call it manually to recreate the dom listener

scrollbarObserver.reListen();