Package Exports
- compute-scroll-into-view
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (compute-scroll-into-view) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Lower level API that is used by the ponyfill scroll-into-view-if-needed to compute where (if needed) elements should scroll based on options defined in the spec. Use this if you want the smallest possible bundlesize and is ok with implementing the actual scrolling yourself.
Install
yarn add compute-scroll-into-viewThe UMD build is also available on unpkg:
<script src="https://unpkg.com/compute-scroll-into-view/umd/compute-scroll-into-view.min.js"></script>You can find the library on window.computeScrollIntoView.
Usage
// es6 import
import computeScrollIntoView from 'compute-scroll-into-view'
// or es5
const computeScrollIntoView = require('compute-scroll-into-view')
const node = document.getElementById('hero')
// same behavior as Element.scrollIntoView({block: "nearest", inline: "nearest"})
// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
const actions = computeScrollIntoView(node, {
scrollMode: 'if-needed',
block: 'nearest',
inline: 'nearest',
})
// same behavior as Element.scrollIntoViewIfNeeded(true)
// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
const actions = computeScrollIntoView(node, { scrollMode: 'if-needed' block: 'center', inline: 'center' })
// Then perform the scrolling, use scroll-into-view-if-needed if you don't want to implement this part
actions.forEach(({ el, top, left }) => {
el.scrollTop = top
el.scrollLeft = left
})