{"id":13495915,"url":"https://github.com/scroll-into-view/compute-scroll-into-view","last_synced_at":"2025-05-14T04:09:02.179Z","repository":{"id":32692745,"uuid":"139067425","full_name":"scroll-into-view/compute-scroll-into-view","owner":"scroll-into-view","description":"Utility for calculating what should be scrolled, how it's scrolled is up to you","archived":false,"fork":false,"pushed_at":"2025-03-17T16:48:38.000Z","size":5778,"stargazers_count":320,"open_issues_count":23,"forks_count":29,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-08T02:39:01.788Z","etag":null,"topics":["scroll-into-view","scroll-into-view-if-needed","scrollintoview"],"latest_commit_sha":null,"homepage":"https://scroll-into-view.dev#scroll-alignment","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scroll-into-view.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-06-28T20:55:34.000Z","updated_at":"2025-03-07T05:32:05.000Z","dependencies_parsed_at":"2024-02-04T07:23:11.082Z","dependency_job_id":"94bece4b-8c27-4b1e-9f65-2ff523ee0a22","html_url":"https://github.com/scroll-into-view/compute-scroll-into-view","commit_stats":{"total_commits":873,"total_committers":17,"mean_commits":51.35294117647059,"dds":0.5509736540664376,"last_synced_commit":"e5c08e75d8f7924d41870b68548beb01033571c9"},"previous_names":["stipsan/compute-scroll-into-view"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scroll-into-view%2Fcompute-scroll-into-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scroll-into-view%2Fcompute-scroll-into-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scroll-into-view%2Fcompute-scroll-into-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scroll-into-view%2Fcompute-scroll-into-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scroll-into-view","download_url":"https://codeload.github.com/scroll-into-view/compute-scroll-into-view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253331017,"owners_count":21891852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["scroll-into-view","scroll-into-view-if-needed","scrollintoview"],"created_at":"2024-07-31T19:01:39.679Z","updated_at":"2025-05-14T04:08:57.143Z","avatar_url":"https://github.com/scroll-into-view.png","language":"TypeScript","readme":"[![npm stat](https://img.shields.io/npm/dm/compute-scroll-into-view.svg?style=flat-square)](https://npm-stat.com/charts.html?package=compute-scroll-into-view)\n[![npm version](https://img.shields.io/npm/v/compute-scroll-into-view.svg?style=flat-square)](https://www.npmjs.com/package/compute-scroll-into-view)\n[![gzip size][gzip-badge]][unpkg-dist]\n[![size][size-badge]][unpkg-dist]\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n![compute-scroll-into-view](https://user-images.githubusercontent.com/81981/43024153-a2cc212c-8c6d-11e8-913b-b4d62efcf105.png)\n\nLower level API that is used by the [ponyfill](https://ponyfill.com) [scroll-into-view-if-needed](https://github.com/scroll-into-view/scroll-into-view-if-needed) to compute where (if needed) elements should scroll based on [options defined in the spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) and the [`scrollMode: \"if-needed\"` draft spec proposal](https://github.com/w3c/csswg-drafts/pull/1805).\nUse this if you want the smallest possible bundlesize and is ok with implementing the actual scrolling yourself.\n\nScrolling SVG elements are supported, as well as Shadow DOM elements. The [VisualViewport](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport) API is also supported, ensuring scrolling works properly on modern devices. Quirksmode is also supported as long as you polyfill [`document.scrollingElement`](https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement).\n\n- [Install](#install)\n- [Usage](#usage)\n- [API](#api)\n  - [compute(target, options)](#computetarget-options)\n  - [options](#options)\n    - [block](#block)\n    - [inline](#inline)\n    - [scrollMode](#scrollmode)\n    - [boundary](#boundary)\n    - [skipOverflowHiddenElements](#skipoverflowhiddenelements)\n\n# Install\n\n```bash\nnpm i compute-scroll-into-view\n```\n\nYou can also use it from a CDN:\n\n```js\nconst { compute } = await import('https://esm.sh/compute-scroll-into-view')\n```\n\n# Usage\n\n```js\nimport { compute } from 'compute-scroll-into-view'\n\nconst node = document.getElementById('hero')\n\n// same behavior as Element.scrollIntoView({block: \"nearest\", inline: \"nearest\"})\n// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\nconst actions = compute(node, {\n  scrollMode: 'if-needed',\n  block: 'nearest',\n  inline: 'nearest',\n})\n\n// same behavior as Element.scrollIntoViewIfNeeded(true)\n// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded\nconst actions = compute(node, {\n  scrollMode: 'if-needed',\n  block: 'center',\n  inline: 'center',\n})\n\n// Then perform the scrolling, use scroll-into-view-if-needed if you don't want to implement this part\nactions.forEach(({ el, top, left }) =\u003e {\n  el.scrollTop = top\n  el.scrollLeft = left\n})\n```\n\n# API\n\n## compute(target, options)\n\n## options\n\nType: `Object`\n\n### [block](https://scroll-into-view.dev/#scroll-alignment)\n\nType: `'start' | 'center' | 'end' | 'nearest'`\u003cbr\u003e Default: `'center'`\n\nControl 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.\nThis means that `block: 'start'` aligns to the top edge and `block: 'end'` to the bottom.\n\n### [inline](https://scroll-into-view.dev/#scroll-alignment)\n\nType: `'start' | 'center' | 'end' | 'nearest'`\u003cbr\u003e Default: `'nearest'`\n\nLike `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.\n\n### [scrollMode](https://scroll-into-view.dev/#scrolling-if-needed)\n\nType: `'always' | 'if-needed'`\u003cbr\u003e Default: `'always'`\n\nThis is a proposed addition to the spec that you can track here: https://github.com/w3c/csswg-drafts/pull/5677\n\nThis library will be updated to reflect any changes to the spec and will provide a migration path.\nTo 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).\n\n### [boundary](https://scroll-into-view.dev/#limit-propagation)\n\nType: `Element | Function`\n\nBy 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.\nBy passing a boundary you can short-circuit this loop depending on your needs:\n\n- Prevent the browser window from scrolling.\n- Scroll elements into view in a list, without scrolling container elements.\n\nYou can also pass a function to do more dynamic checks to override the scroll scoping:\n\n```js\nconst actions = compute(target, {\n  boundary: (parent) =\u003e {\n    // By default `overflow: hidden` elements are allowed, only `overflow: visible | clip` is skipped as\n    // this is required by the CSSOM spec\n    if (getComputedStyle(parent)['overflow'] === 'hidden') {\n      return false\n    }\n\n    return true\n  },\n})\n```\n\n### skipOverflowHiddenElements\n\nType: `Boolean`\u003cbr\u003e Default: `false`\n\nBy default the [spec](https://drafts.csswg.org/cssom-view/#scrolling-box) states that `overflow: hidden` elements should be scrollable because it has [been used to allow programatic scrolling](https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden). This behavior can sometimes lead to [scrolling issues](https://github.com/scroll-into-view/scroll-into-view-if-needed/pull/225#issue-186419520) when you have a node that is a child of an `overflow: hidden` node.\n\nThis package follows the convention [adopted by Firefox](https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18) of setting a boolean option to _not_ scroll all nodes with `overflow: hidden` set.\n\n[gzip-badge]: https://img.shields.io/bundlephobia/minzip/compute-scroll-into-view?label=gzip%20size\u0026style=flat-square\n[size-badge]: https://img.shields.io/bundlephobia/min/compute-scroll-into-view?label=size\u0026style=flat-square\n[unpkg-dist]: https://unpkg.com/compute-scroll-into-view/dist/\n","funding_links":[],"categories":["TypeScript","目录"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscroll-into-view%2Fcompute-scroll-into-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscroll-into-view%2Fcompute-scroll-into-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscroll-into-view%2Fcompute-scroll-into-view/lists"}