https://github.com/bramus/scrollparent-polyfill
Polyfill for `Element.scrollParent()`
https://github.com/bramus/scrollparent-polyfill
Last synced: about 1 month ago
JSON representation
Polyfill for `Element.scrollParent()`
- Host: GitHub
- URL: https://github.com/bramus/scrollparent-polyfill
- Owner: bramus
- License: mit
- Created: 2026-05-29T11:41:18.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-05-29T12:02:43.000Z (2 months ago)
- Last Synced: 2026-05-29T14:04:25.352Z (2 months ago)
- Language: TypeScript
- Size: 15.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `Element.scrollParent()` polyfill
A lightweight JavaScript polyfill for `Element.scrollParent()`, modeled after the standard behavior of scroll container resolution in the CSSOM View and CSS Overflow specifications.
It utilizes `get-containing-block` to correctly resolve the scroll parent for absolutely and fixed-positioned elements, skipping static ancestor containers that do not clip them.
## Features
- **Specification-Compliant Resolution**: Resolves standard scroll containers accurately by checking computed `overflow-x` and `overflow-y` styles (`auto`, `scroll`, `hidden`).
- **Absolute & Fixed Support**: Correctly skips non-containing blocks for absolute and fixed positioned elements to find their true scrolling ancestor.
- **CSS Overflow Propagation**: Accounts for UA-specific overflow propagation from the `` and `` elements to the viewport.
- **Prototype Polyfill**: Automatically polyfills `Element.prototype.scrollParent()`.
- **Flexible API**: Can be used as an imported standalone utility or called directly on DOM element prototypes.
- **Fully Typed**: Written in TypeScript with standard types exported.
- **ESM Support**: Built as an ES Module.
## Installation
```bash
npm install scrollparent-polyfill
```
## Usage
### 1. As a Polyfill
Simply import the package to automatically install the method on `Element.prototype`:
```javascript
import 'scrollparent-polyfill';
const element = document.querySelector('.my-child-element');
// Call standard camelCase method
const scrollParent = element.scrollParent();
console.log('Scroll parent is:', scrollParent);
```
### 2. As a Standalone Utility
If you prefer not to modify the global `Element.prototype`, you can import the helper function directly:
```javascript
import { getScrollParent } from 'scrollparent-polyfill';
const element = document.querySelector('.my-child-element');
const scrollParent = getScrollParent(element);
console.log('Scroll parent is:', scrollParent);
```
## API
### `getScrollParent(node)`
**Parameters:**
- `node` (`Element`): The element to find the scroll parent for.
**Returns:**
- `Element | null | undefined`:
- The scroll parent element if found.
- `document.scrollingElement` if no other scroll parent is found (or if overflow propagates to the viewport).
- `undefined` if the element is invalid or not connected to the document.
## License
MIT