# scroll-into-view
> scrolls an elements into view, recursively aligning parents.
Latest version **1.16.2** (published 2022-06-27) · MIT license · 0 weekly downloads
## Install
```sh
npm install scroll-into-view
pnpm add scroll-into-view
yarn add scroll-into-view
bun add scroll-into-view
```
## Health
**Score 23/100 (F)** — status: abandoned.
Positive: has types package; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.16.2 |
| Published | 2022-06-27 |
| First published | 2013-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/scroll-into-view) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | korynunn |
| Keywords | scroll into view, scrollIntoView, scroll into view if needed, smooth scroll, scroll parents |
## Links
- npm: https://www.npmjs.com/package/scroll-into-view
- Repository: https://github.com/KoryNunn/scroll-into-view
- Homepage: https://github.com/KoryNunn/scroll-into-view#readme
- Issues: https://github.com/KoryNunn/scroll-into-view/issues
- npm.io page: https://npm.io/package/scroll-into-view
## Alternatives
- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@pandacss/eslint-plugin](https://npm.io/package/@pandacss/eslint-plugin.md) — 18.7K weekly downloads
## Recent versions
- 1.16.2 (latest) — 2022-06-27
- 1.16.1 — 2022-06-13
- 1.16.0 — 2021-06-21
- 1.15.0 — 2020-07-30
- 1.14.2 — 2020-03-12
- 1.14.1 — 2019-12-28
- 1.14.0 — 2019-12-19
- 1.13.1 — 2019-12-10
- 1.12.3 — 2019-11-20
- 1.12.2 — 2019-10-24
- 1.12.1 — 2019-10-24
- 1.12.0 — 2019-10-24
- 1.11.0 — 2019-10-11
- 1.10.0 — 2019-10-11
- 1.9.7 — 2019-05-07
- … 35 more at https://npm.io/package/scroll-into-view/versions
## README
 
[](https://travis-ci.org/KoryNunn/scroll-into-view)
[](#backers)
[](#sponsors)
## What
Scrolls an element into view
Also scrolls any scroll-parents so that the element is in view.
## Donating
If you want to show your support financially, [I'm on Patreon](https://patreon.com/user/korynunn)
## Example
[Example](http://korynunn.github.io/scroll-into-view/example/)
## How
require it
```javascript
var scrollIntoView = require('scroll-into-view');
```
use it
```javascript
scrollIntoView(someElement);
```
You can pass settings to control the time, easing, and whether or not a parent is a valid element to scroll, and alignment:
All options are optional.
```javascript
scrollIntoView(someElement, {
time: 500, // half a second
ease: function(value){
return Math.pow(value,2) - value; // Do something weird.
},
validTarget: function(target, parentsScrolled){
// Only scroll the first two elements that don't have the class "dontScroll"
// Element.matches is not supported in IE11, consider using Element.prototype.msMatchesSelector if you need to support that browser
return parentsScrolled < 2 && target !== window && !target.matches('.dontScroll');
},
align:{
top: 0 to 1, default 0.5 (center)
left: 0 to 1, default 0.5 (center)
topOffset: pixels to offset top alignment
leftOffset: pixels to offset left alignment,
lockX: boolean to prevent X scrolling,
lockY: boolean to prevent Y scrolling
},
isScrollable: function(target, defaultIsScrollable){
// By default scroll-into-view will only attempt to scroll elements that have overflow not set to `"hidden"` and who's scroll width/height is larger than their client height.
// You can override this check by passing an `isScrollable` function to settings:
return defaultIsScrollable(target) || target !== window && ~target.className.indexOf('scrollable');
},
isWindow: function(target){
// If you need special detection of the window object for some reason, you can do it here.
return target.self === target;
},
cancellable: true, // default is true, set to false to prevent users from cancelling the scroll with a touch or mousewheel
maxSynchronousAlignments: 3, // default is 3. Maximum number of times to try and align elements synchronously before completing.
debug: true // default is false. This will spit out some logs that can help you understand what scroll-into-view is doing if it isn't doing what you expect.
});
```
You can pass a callback that will be called when all scrolling has been completed or canceled.
```javascript
scrollIntoView(someElement [, settings], function(type){
// Scrolling done.
// type will be 'complete' if the scroll completed or 'canceled' if the current scroll was canceled by a new scroll
});
```
You can cancel the current scroll by using the cancel function returned by scrollIntoView:
```javascript
var cancel = scrollIntoView(someElement);
// ... later ...
cancel()
```
## Size
Small. ~3.03 KB for the standalone.
## Changelog
[View Changeog](https://changelogit.korynunn.com/#korynunn/scroll-into-view)
## Testing
Testing scrolling is really hard without stuff like webdriver, but what's there works ok for the moment.
The tests will attempt to launch google-chrome. If you don't have chrome, lol just kidding you do.
```
npm run test
```
# Standalone
If you want to use this module without browserify, you can use `scrollIntoView.min.js`
```
```
# Browser support
All evergreen browsers are supported.
Yes this means IE11 is not supported, scroll-into-view has the same support targets as microsoft: https://www.zdnet.com/article/microsoft-sets-deadline-for-end-of-support-of-ie-11-by-365-apps/
## Contributors
This project exists thanks to all the people who contribute.
## Backers
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/scroll-into-view#backer)]
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/scroll-into-view#sponsor)]
---
_Source: https://npm.io/package/scroll-into-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._