# auto-scroll-page

> A library to auto scroll your page

Latest version **0.0.6** (published 2023-02-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install auto-scroll-page
pnpm add auto-scroll-page
yarn add auto-scroll-page
bun add auto-scroll-page
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2023-02-19 |
| First published | 2022-10-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sharmil Kathiriya |
| Maintainers | shar.kath |
| Keywords | react-auto-scroll, auto-scroll, autoscroll, autoup, autodown, pointer-scroll |

## Links

- npm: https://www.npmjs.com/package/auto-scroll-page
- npm.io page: https://npm.io/package/auto-scroll-page

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Recent versions

- 0.0.6 (latest) — 2023-02-19
- 0.0.5 — 2022-11-09
- 0.0.4 — 2022-10-23
- 0.0.3 — 2022-10-23
- 0.0.2 — 2022-10-22
- 0.0.1 — 2022-10-22

## README

<h1 align="center">
  <br>
  <a href="https://sharmilkathiriya.netlify.app/"><img src="https://sharmilkathiriya.netlify.app/static/media/lg.04f4371c54ae81488ede.png" alt="Markdownify" width="200"></a>
<br>
  auto-scroll-page
  <br>
</h1>
<div align="center">
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Badge"/>
<img src="https://img.shields.io/static/v1?label=%F0%9F%8C%9F&message=auto-scroll-page%20&style=style=flat&color=BC4E99" alt="Star Badge"/>
<img src="https://img.shields.io/badge/Github-kathiriyasharmil-rgb(99,99,99,)" alt="Star Badge" href="https://github.com/kathiriyasharmil"/>
<img src="https://img.shields.io/badge/NPM-shar.kath-rgb(235, 62, 13)" alt="Star Badge" href="https://github.com/kathiriyasharmil"/>
</div>

## install

```
npm install auto-scroll-page
```

## use

```js
import React from "react";
import Scroll from "auto-scroll-page";
import Page from "./Components/index";

function App() {
  return (
    <div className="App">
      <Scroll size={10} speed={2} autoSpeed={4}>
        <Page />
      </Scroll>
    </div>
  );
}
export default App;
```

<p align="center">
  <a href="#size">Size</a> &nbsp;•&nbsp; 
  <a href="#speed">Speed</a> &nbsp;•&nbsp;
  <a href="#auto-speed">AutoSpeed</a> 
</p>

<div align="center">
  <img src="https://raw.githubusercontent.com/kathiriyasharmil/BVM/master/Test/Js/asp.png" >
  <br>
</div>
 * I hope this photo gives you an idea of what `"size" (size = {10})` means.<br>
 * Auto scroll page (auto-scroll-page) will run only if the mouse pointer comes inside the size area.<br>
  - The size area can be minimum 1 and maximum 50.<br> 
 * Speed `"speed" (speed = {2})` ​​means the page scroll speed will increase only when the mouse moves within the size area.<br>
  - Speed ​​can be minimum 2 and maximum 10000.<br>
 * Auto speed  `"autoSpeed" (autoSpeed={4})` means how fast the page will scroll when the mouse is inside the size area.  And even if the pointer is inside the size area and not moving, the page will scroll.<br> 
  - Autospeed can be minimum 2 and maximum 1000.
  <div align="right">[ <a href="#install">↑ to top ↑</a> ]</div>
  <h1></h1>

## Size

If size 10, speed 2 and autospeed 4

<div align="left">
  <img src="https://github.com/kathiriyasharmil/BVM/blob/master/Test/Js/1.size10-autoSpeed-4.gif?raw=true" width="1000">
  <br>
</div>
  <div align="right">[ <a href="#install">↑ to top ↑</a> ]</div>
  <h1></h1>

## Speed

If size 40, speed 10 and autospeed 4

<div align="left">
  <img src="https://github.com/kathiriyasharmil/BVM/blob/master/Test/Js/4.size40-speed10-autoSpeed4_.gif?raw=true" width="1000">
  <br>
</div>
  <div align="right">[ <a href="#install">↑ to top ↑</a> ]</div>
  <h1></h1>

## Auto-Speed

If size 10, speed 2 and autospeed 10

<div align="left">
  <img src="https://github.com/kathiriyasharmil/BVM/blob/master/Test/Js/2.size10-autoSpeed-10.gif?raw=true" width="1000">
  <br>
</div>
<br>
If size 40, speed 2 and autospeed 7
<div align="left">
  <img src="https://github.com/kathiriyasharmil/BVM/blob/master/Test/Js/3.size-40-autoSpeed-7.gif?raw=true" width="1000">
  <br>
</div>
  <div align="right">[ <a href="#install">↑ to top ↑</a> ]</div>
  <h1></h1>

## Profile

[SK](https://sharmilkathiriya.netlify.app/) - Web version of Auto scroll page

<a href="https://sharmilkathiriya.netlify.app/" target="_blank"><img src="https://img.shields.io/badge/website-000000?style=for-the-badge&logo=About.me&logoColor=white"/></a>&nbsp;&nbsp;&nbsp;
<a href="https://www.linkedin.com/in/sharmilkathiriya/" target="_blank"><img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="Share on LinkedIn"/></a>&nbsp;&nbsp;&nbsp;
<a href="https://github.com/kathiriyasharmil" target="_blank"><img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white" alt="Share on LinkedIn"/></a>&nbsp;&nbsp;&nbsp;
<a href="https://stackoverflow.com/users/17181035/sharmil-kathiriya" target="_blank"><img src="https://img.shields.io/badge/Stack_Overflow-FE7A16?style=for-the-badge&logo=stack-overflow&logoColor=white"/></a>&nbsp;&nbsp;&nbsp;

## License

ISC

---

---
_Source: https://npm.io/package/auto-scroll-page · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._