compute-scroll-into-view

  • Version 3.1.0
  • Published
  • 94.6 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

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 that block: 'start' aligns to the top edge and block: '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 spec
    if (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 pages inline: '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

property el

el: Element;

    property left

    left: number;

      property top

      top: number;

        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 onejsDocs.io badgeto 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
          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](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>