https://github.com/faustienf/scroll-into-area
♿️ Scrolls an element into view of container
https://github.com/faustienf/scroll-into-area
scroll-into-view scroll-view scroll-viewport smooth-scrolling
Last synced: 2 months ago
JSON representation
♿️ Scrolls an element into view of container
- Host: GitHub
- URL: https://github.com/faustienf/scroll-into-area
- Owner: faustienf
- License: mit
- Created: 2022-12-28T20:23:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-29T09:07:59.000Z (about 2 years ago)
- Last Synced: 2024-08-09T08:27:56.944Z (10 months ago)
- Topics: scroll-into-view, scroll-view, scroll-viewport, smooth-scrolling
- Language: TypeScript
- Homepage: https://scroll-into-area-faustienf.vercel.app
- Size: 59.6 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# scroll-into-area
[](https://npmjs.org/package/scroll-into-area)
♿️ Smooth scrolling an element into view. [Demo](https://scroll-into-area.vercel.app).
## Install
```sh
npm install scroll-into-area
```
## Features
- 📈 Customize [easing function](https://easings.net)
- 🚫 Abort scrolling ([AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal))
- 🔄 Waiting for animation to end
## Usage
```ts
import { scrollIntoArea } from "scroll-into-area";
const controller = new AbortController();
// Abort scrolling
// controller.abort(); ❌
const container = document.querySelector("ul");
const target = container.querySelector("li");
const progress = await scrollIntoArea(target, {
container,
x: "end", // start, center, end
y: "start", // start, center, end
duration: 400, // ms
signal: controller.signal,
// 👀 https://easings.net/#easeOutCubic
easing: (x) => 1 - Math.pow(1 - x, 3),
});
if (progress === 1) {
console.log("Completed");
} else {
console.log("Aborted");
}
```
### Animation
Linear function `(t) => t` is used by default. Pass [easing](https://easings.net), if you want to change easing function.
`duration` is animation duration in milliseconds.
```ts
scrollIntoArea(target, {
duration: 400, // ms
// 👀 https://easings.net/#easeOutCubic
easing: (x) => 1 - Math.pow(1 - x, 3),
});
```
### Abort scrolling
Pass `signal` ([AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)),
if you want to abort scrolling.
```ts
const controller = new AbortController();
setTimeout(() => {
controller.abort();
}, 100);
const progress = await scrollIntoArea(target, {
...,
signal: controller.signal,
});
if (progress !== 1) {
console.log('Scrolling has been aborted.');
}
```
`progress` is a number from _0_ to _1_.
`1` - Scrolling is completed _100%_.
`<1` - Scrolling has been aborted and completed _x%_.
```ts
const progress = await scrollIntoArea(target, {
...,
});
if (progress !== 1) {
console.log('Scrolling has been aborted.');
} else {
console.log('Completed.');
}
```