compute-scroll-into-view
- Version 3.1.1
- Published
- 95.3 kB
- No dependencies
- MIT license
Install
npm i compute-scroll-into-view
yarn add compute-scroll-into-view
pnpm add compute-scroll-into-view
Overview
The engine that powers scroll-into-view-if-needed
Index
Functions
Interfaces
Type Aliases
Functions
function compute
compute: (target: Element, options: Options) => ScrollAction[];
Modifiers
@public
Interfaces
interface Options
interface Options {}
Modifiers
@public
property block
block?: ScrollLogicalPosition;
Control the logical scroll position on the y-axis. The spec states that the
block
direction is related to the [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode), but this is not implemented yet in this library. This means thatblock: 'start'
aligns to the top edge andblock: 'end'
to the bottom.
property boundary
boundary?: Element | ((parent: Element) => boolean) | null;
By default there is no boundary. All the parent elements of your target is checked until it reaches the viewport ([
document.scrollingElement
](https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement)) when calculating layout and what to scroll. By passing a boundary you can short-circuit this loop depending on your needs:- Prevent the browser window from scrolling. - Scroll elements into view in a list, without scrolling container elements.
You can also pass a function to do more dynamic checks to override the scroll scoping:
let actions = compute(target, {boundary: (parent) => {// By default `overflow: hidden` elements are allowed, only `overflow: visible | clip` is skipped as// this is required by the CSSOM specif (getComputedStyle(parent)['overflow'] === 'hidden') {return false}return true},})
property inline
inline?: ScrollLogicalPosition;
Like
block
this is affected by the [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode). In left-to-right pagesinline: 'start'
will align to the left edge. In right-to-left it should be flipped. This will be supported in a future release.
property scrollMode
scrollMode?: ScrollMode;
This is a proposed addition to the spec that you can track here: https://github.com/w3c/csswg-drafts/pull/5677
This library will be updated to reflect any changes to the spec and will provide a migration path. To be backwards compatible with
Element.scrollIntoViewIfNeeded
if something is not 100% visible it will count as "needs scrolling". If you need a different visibility ratio your best option would be to implement an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
property skipOverflowHiddenElements
skipOverflowHiddenElements?: boolean;
New option that skips auto-scrolling all nodes with overflow: hidden set See FF implementation: https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18
Modifiers
@public
interface ScrollAction
interface ScrollAction {}
Modifiers
@public
Type Aliases
type ScrollMode
type ScrollMode = 'always' | 'if-needed';
This new option is tracked in this PR, which is the most likely candidate at the time: https://github.com/w3c/csswg-drafts/pull/1805
Modifiers
@public
Package Files (1)
Dependencies (0)
No dependencies.
Dev Dependencies (16)
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/compute-scroll-into-view
.
- Markdown[](https://www.jsdocs.io/package/compute-scroll-into-view)
- HTML<a href="https://www.jsdocs.io/package/compute-scroll-into-view"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 3929 ms. - Missing or incorrect documentation? Open an issue for this package.