### Install scrollparent Source: https://github.com/olahol/scrollparent.js/blob/master/README.md Use npm to add the library to your project dependencies. ```bash npm install scrollparent --save ``` -------------------------------- ### Importing and Basic Usage of Scrollparent Source: https://context7.com/olahol/scrollparent.js/llms.txt Demonstrates how to install and import Scrollparent using different module systems (CommonJS, ES Modules, Browser Global). Shows basic usage for finding the scrolling parent of an element, including cases with nested scrollable containers, elements with no scrollable parents, and SVG elements. Also covers handling invalid inputs. ```javascript // Installation // npm install scrollparent --save // CommonJS (Node.js/Bundlers) var Scrollparent = require("scrollparent"); // ES Modules import Scrollparent from "scrollparent"; // Browser global (after including scrollparent.js via script tag) // Scrollparent is available as window.Scrollparent // Basic usage: Find scrolling parent of an element var content = document.getElementById("content"); var scrollingParent = Scrollparent(content); // Returns: The nearest ancestor with overflow:scroll or overflow:auto, // or document.scrollingElement / document.documentElement if none found // Element inside a scrollable div var element = document.getElementById("inside-scrolling-div"); var container = Scrollparent(element); // Returns: HTMLDivElement (the scrolling container) // Element with no scrolling parent var topLevelElement = document.getElementById("top-level"); var root = Scrollparent(topLevelElement); // Returns: document.scrollingElement || document.documentElement // Works with SVG elements too var svgElement = document.querySelector("svg circle"); var svgScrollParent = Scrollparent(svgElement); // Invalid input handling Scrollparent("not-an-element"); // Returns: undefined Scrollparent(null); // Returns: undefined Scrollparent(123); // Returns: undefined // Practical example: Scroll element into view within its container function scrollIntoViewInContainer(element) { var container = Scrollparent(element); if (container && container !== document.documentElement) { var elementRect = element.getBoundingClientRect(); var containerRect = container.getBoundingClientRect(); container.scrollTop += elementRect.top - containerRect.top; } } // Example with different overflow styles detected: // overflow: scroll -> detected as scrolling parent // overflow: auto -> detected as scrolling parent // overflow-x: scroll -> detected as scrolling parent // overflow-y: auto -> detected as scrolling parent // overflow: hidden -> NOT detected (not scrollable) ``` -------------------------------- ### Root Scrolling Element Behavior and Polyfill Source: https://context7.com/olahol/scrollparent.js/llms.txt Explains how Scrollparent identifies the root scrolling element when no other scrollable parent is found, using `document.scrollingElement || document.documentElement`. Provides an example of checking if an element scrolls within the main document and suggests including a polyfill for older browser support. ```javascript var Scrollparent = require("scrollparent"); // Element with no scrollable ancestors returns root element var bodyContent = document.getElementById("main-content"); var root = Scrollparent(bodyContent); // In standards mode: document.scrollingElement (typically ) // In quirks mode: document.body // Fallback: document.documentElement // Check if element scrolls in the main document function isDocumentScrolled(element) { var scrollParent = Scrollparent(element); var rootElement = document.scrollingElement || document.documentElement; return scrollParent === rootElement; } // For older browser support, include the scrollingElement polyfill: // ``` -------------------------------- ### Get scrolling parent of an element Source: https://github.com/olahol/scrollparent.js/blob/master/README.md Retrieve the scrolling parent for specific DOM elements. ```js var Scrollparent = require("scrollparent"); Scrollparent(document.getElementById("content")) // HTMLHtmlElement or HTMLBodyElement as appropriate ``` ```js var Scrollparent = require("scrollparent"); Scrollparent(document.getElementById("inside-a-scrolling-div")) // HTMLDivElement ``` -------------------------------- ### Root Scrolling Element Behavior Source: https://context7.com/olahol/scrollparent.js/llms.txt Details on how scrollparent.js identifies and returns the root scrolling element when no other scrollable parent is found. ```APIDOC ## Root Scrolling Element Behavior ### Description When no scrolling parent is found in the DOM hierarchy, Scrollparent returns the document's root scrolling element. The library determines this using `document.scrollingElement || document.documentElement`. ### Method `Scrollparent(element)` ### Endpoint N/A (Function behavior) ### Parameters N/A ### Request Example ```javascript var Scrollparent = require("scrollparent"); // Element with no scrollable ancestors returns root element var bodyContent = document.getElementById("main-content"); var root = Scrollparent(bodyContent); // Check if element scrolls in the main document function isDocumentScrolled(element) { var scrollParent = Scrollparent(element); var rootElement = document.scrollingElement || document.documentElement; return scrollParent === rootElement; } ``` ### Response #### Success Response (200) - **rootScrollingElement** (HTMLElement) - The document's root scrolling element (e.g., `document.scrollingElement` or `document.documentElement`). #### Response Example ```json { "example": " element" } ``` ### Notes - For full browser compatibility with older browsers, you may need to include a polyfill for `document.scrollingElement`. - Example polyfill source: `` ``` -------------------------------- ### Determine root scrolling element Source: https://github.com/olahol/scrollparent.js/blob/master/README.md The internal logic used to identify the root scrolling element of the document. ```js document.scrollingElement || document.documentElement; ``` -------------------------------- ### Scrollparent Function API Source: https://context7.com/olahol/scrollparent.js/llms.txt The main function of the scrollparent library. It accepts an element and returns its nearest scrolling ancestor. ```APIDOC ## Scrollparent Function ### Description The main and only function exported by this library. It accepts an HTML or SVG element and returns its nearest scrolling ancestor. The function checks the computed `overflow` property of each parent element, looking for values containing "scroll" or "auto". If no scrolling parent is found, it returns the document's root scrolling element. ### Method `Scrollparent(element)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript // CommonJS (Node.js/Bundlers) var Scrollparent = require("scrollparent"); // ES Modules import Scrollparent from "scrollparent"; // Browser global // Scrollparent is available as window.Scrollparent // Basic usage: var content = document.getElementById("content"); var scrollingParent = Scrollparent(content); // Invalid input handling: Scrollparent("not-an-element"); // Returns: undefined Scrollparent(null); // Returns: undefined ``` ### Response #### Success Response (200) - **scrollingParent** (HTMLElement | SVGElement | DocumentScrollingElement) - The nearest ancestor with `overflow:scroll` or `overflow:auto`, or the document's root scrolling element if none is found. #### Response Example ```json { "example": "HTMLDivElement (the scrolling container)" } ``` ### Error Handling - **Invalid Input**: Returns `undefined` if the input is not a valid HTML or SVG element. ### Notes - Detects `overflow: scroll`, `overflow: auto`, `overflow-x: scroll`, `overflow-y: auto`. - Does not detect `overflow: hidden`. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.