@rfkhusnutdinov/overflow-observer
v2.0.0
Published
JavaScript plugin that monitors changes to the <html> or <body> overflow property.
Maintainers
rfkhusnutdinovReadme
OverflowObserver
A lightweight JavaScript plugin to monitor changes to the overflow property on the <body> and <html> (document.documentElement) elements.
Useful for detecting scroll lock changes.
Features
- Observes changes to
bodyoverflow, including fallback todocument.documentElement - Dispatches a custom
overflowchangeevent when overflow changes - Singleton pattern ensures only one observer instance
Installation
Install from npm
npm install @rfkhusnutdinov/overflow-observerimport OverflowObserver from "@rfkhusnutdinov/overflow-observer";Use OverflowObserver from CDN
<script src="https://cdn.jsdelivr.net/npm/@rfkhusnutdinov/overflow-observer@latest"></script>Usage
const observer = OverflowObserver.getInstance();
// Get overflow value
const overflowValue = observer.overflow; // Can be "hidden" or "visible"
// Listen for overflow changes
document.body.addEventListener("overflowchange", (event) => {
console.log("Overflow changed to:", event.detail.overflow);
});
// Disconnect observer when no longer needed
observer.disconnect();Notes
- The plugin uses a MutationObserver to track changes in body style and class attributes.
- It returns body overflow, but if body is not hidden, it falls back to document.documentElement overflow.
- Singleton pattern ensures only one instance is active at a time.
API
| Method | Description | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | | OverflowObserver.getInstance() | Returns the singleton instance of the observer. Initializes if it doesn’t exist yet. | | disconnect() | Stops observing and cleans up the instance. the singleton so a new instance can be created on next getInstance() call. |