Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jagaapple/edge-scroller
Automatic scrolling by the pointer for the edge of element.
https://github.com/jagaapple/edge-scroller
scroll typescript
Last synced: 23 days ago
JSON representation
Automatic scrolling by the pointer for the edge of element.
- Host: GitHub
- URL: https://github.com/jagaapple/edge-scroller
- Owner: jagaapple
- License: mit
- Created: 2020-03-03T14:08:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-03-09T09:12:55.000Z (over 4 years ago)
- Last Synced: 2024-09-13T05:28:12.434Z (about 2 months ago)
- Topics: scroll, typescript
- Language: JavaScript
- Homepage:
- Size: 2.68 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
edge-scroller
⬇️ Automatic scrolling by the pointer for the edge of element. ⬆️
```ts
import { EdgeScroller } from "edge-scroller";
const boxElement = window.document.getElementById("box");
const edgeScroller = new EdgeScroller(boxElement, { offset: 80, scrollSpeedCoefficient: 0.8 });
edgeScroller.enable();
```
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [Quick Start](#quick-start)
- [Requirements](#requirements)
- [Installation](#installation)
- [Setup](#setup)
- [API](#api)
- [`EdgeScroller.constructor`](#edgescrollerconstructor)
- [`EdgeScroller.prototype.enable`](#edgescrollerprototypeenable)
- [`EdgeScroller.prototype.disable`](#edgescrollerprototypedisable)
- [Contributing to edge-scroller](#contributing-to-edge-scroller)
- [License](#license)
## Features
| FEATURES | WHAT YOU CAN DO |
|---------------------------|-------------------------------------------|
| 🖱️ **Available anywhere** | You can use while drag and drop or others |
| 💎 **No Dependencies** | All you need is adding this package |
| 🎩 **Type Safe** | You can use with TypeScript |
## Quick Start
### Requirements
- npm or Yarn
- Node.js 10.0.0 or higher
### Installation
```bash
$ npm install edge-scroller
```
If you are using Yarn, use the following command.
```bash
$ yarn add edge-scroller
```
### Setup
Firstly import `EdgeScroller` class from this package and give a scrollable element which has `overflow: scroll;` style such as
to a constructor. Then you can switch to enable and disable via `enable()` or `disable()` methods.
```ts
import { EdgeScroller } from "edge-scroller";
const boxElement = window.document.getElementById("box");
const edgeScroller = new EdgeScroller(boxElement);
// To enable.
edgeScroller.enable();
// To disable.
edgeScroller.disable();
```
## API
### `EdgeScroller.constructor`
```ts
import { EdgeScroller } from "edge-scroller";
const edgeScroller = new EdgeScroller(boxElement, { offset: 80, scrollSpeedCoefficient: 0.8 });
```
This creates a new instance object of `EdgeScroller` class.
- `targetElement: HTMLElement`
- Required.
- The target scrollable element. If the element is not scrollable, edge-scroller does not work fine.
- `options: Options`
- Optional, a default value is `{}` .
- `offset: number`
- Optional, a default value is `50` .
- An offset value to begin scrolling.
- `offscrollSpeedCoefficientset: number`
- Optional, a default value is `0.5` .
- A coefficient of scroll speed.
### `EdgeScroller.prototype.enable`
```ts
const edgeScroller = new EdgeScroller(boxElement);
edgeScroller.enable();
```
This enables automatic scrolling.
### `EdgeScroller.prototype.disable`
```ts
const edgeScroller = new EdgeScroller(boxElement);
edgeScroller.disable();
```
This disables automatic scrolling.
## Contributing to edge-scroller
Bug reports and pull requests are welcome on GitHub at
[https://github.com/jagaapple/edge-scroller](https://github.com/jagaapple/edge-scroller). This project
is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the
[Contributor Covenant](http://contributor-covenant.org) code of conduct.
Please read [Contributing Guidelines](./.github/CONTRIBUTING.md) before development and contributing.
## License
The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
Copyright 2020 Jaga Apple. All rights reserved.