edge-scroller

⬇️ Automatic scrolling by the pointer for the edge of element. ⬆️

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
• Features
• Quick Start
  • Requirements
  • Installation
  • Setup
• API
  • EdgeScroller.constructor
  • EdgeScroller.prototype.enable
  • EdgeScroller.prototype.disable
• Contributing to edge-scroller
• 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

$ npm install edge-scroller

If you are using Yarn, use the following command.

$ 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.

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

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

const edgeScroller = new EdgeScroller(boxElement);
edgeScroller.enable();

This enables automatic scrolling.

EdgeScroller.prototype.disable

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. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Please read Contributing Guidelines before development and contributing.

License

The library is available as open source under the terms of the MIT License.

Copyright 2020 Jaga Apple. All rights reserved.