• Version 3.1.0
  • Published
  • 94.6 kB
  • No dependencies
  • MIT license


npm i compute-scroll-into-view
yarn add compute-scroll-into-view
pnpm add compute-scroll-into-view


The engine that powers scroll-into-view-if-needed



function compute

compute: (target: Element, options: Options) => ScrollAction[];
  • Modifiers

    • @public


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](, 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]( 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]( 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:

    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](

property skipOverflowHiddenElements

skipOverflowHiddenElements?: boolean;
  • New option that skips auto-scrolling all nodes with overflow: hidden set See FF implementation:


    • @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:


          • @public

        Package Files (1)

        Dependencies (0)

        No dependencies.

        Dev Dependencies (16)

        Peer Dependencies (0)

        No peer dependencies.


        To add a badge like this badgeto your package's README, use the codes available below.

        You may also use to create a custom badge linking to

        • Markdown
        • HTML
          <a href=""><img src="" alt=""></a>