https://github.com/asvd/dragscroll

micro library for drag-n-drop scrolling style
https://github.com/asvd/dragscroll

drag dragscroll enables-scrolling javascript micro-library mouse scroll scrolling

Last synced: 11 days ago
JSON representation

micro library for drag-n-drop scrolling style

• Host: GitHub
• URL: https://github.com/asvd/dragscroll
• Owner: asvd
• License: mit
• Created: 2015-03-22T14:17:28.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-05-18T15:31:49.000Z (about 4 years ago)
• Last Synced: 2024-05-15T20:08:32.656Z (about 1 month ago)
• Topics: drag, dragscroll, enables-scrolling, javascript, micro-library, mouse, scroll, scrolling
• Language: JavaScript
• Homepage: http://asvd.github.io/dragscroll/
• Size: 25.4 KB
• Stars: 1,088
• Watchers: 20
• Forks: 171
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - asvd/dragscroll - micro library for drag-n-drop scrolling style (JavaScript)
• awesome-stars - asvd/dragscroll - micro library for drag-n-drop scrolling style (JavaScript)

README

        
dragscroll

==========

Dragscroll is a micro JavaScript library (910 bytes minified) which

enables scrolling via holding the mouse button ("drag and drop" or

"click and hold" style, [online

demo](http://asvd.github.io/dragscroll/)). It has no dependencies and

is written in vanilla JavaScript (which means it works anywhere).

### Usage

Download the and unpack

[distribution](https://github.com/asvd/dragscroll/releases/download/v0.0.8/dragscroll-0.0.8.tar.gz),

or install it using [Bower](http://bower.io/):

```sh

$ bower install dragscroll

```

or npm:

```sh

$ npm install dragscroll

```

Load the `dragscroll.js` in a preferable way (that is an UMD module):

```html

```

Add the `dragscroll` class to a scrollable element:

```html



    Big text goes here...



```


That's it! Now you can scroll it by dragging. You can also add the

`dragscroll` class to the `` element and drag the whole page.

Keep in mind that now it is not possible to select the content with

mouse, so apply the `cursor: default;` CSS style to prevent confusing

the users (or even `cursor: grab;` in case the content is not a text).

If you add or remove the `dragscroll` class dynamically, invoke

`dragscroll.reset()` to update the listeners.

You can also add the `nochilddrag` attribute to a scrollable element,

which will only enable drag-scrolling for an element itself, but not

for its subchildren. This can be usefull, if you want to enable the

scrolling the area by dragging its empty space, but keep the

opportunity to select the text (see

[example](http://asvd.github.io/jailed/demos/web/process/)).

-

Follow me on twitter: https://twitter.com/asvd0