All Projects → asvd → Dragscroll

asvd / Dragscroll

Licence: mit
micro library for drag-n-drop scrolling style

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Dragscroll

Mac Mouse Fix
Mac Mouse Fix - A simple way to make your mouse better.
Stars: ✭ 362 (-63.4%)
Mutual labels:  mouse, scroll, scrolling
React Indiana Drag Scroll
React component which implements scrolling via holding the mouse button or touch
Stars: ✭ 190 (-80.79%)
Mutual labels:  drag, scroll, scrolling
Android scroll endless
Scroll endless for Android recyclerview
Stars: ✭ 12 (-98.79%)
Mutual labels:  scroll, scrolling
React Use Gesture
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
Stars: ✭ 5,704 (+476.74%)
Mutual labels:  drag, scroll
Any Touch
👋 手势库, 按需2kb~5kb, 兼容PC / 移动端
Stars: ✭ 567 (-42.67%)
Mutual labels:  mouse, drag
Phytouch
Smooth scrolling, rotation, pull to refresh, page transition and any motion for the web - 丝般顺滑的触摸运动方案
Stars: ✭ 2,854 (+188.57%)
Mutual labels:  scroll, scrolling
Ngx Scroll To
Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies.
Stars: ✭ 269 (-72.8%)
Mutual labels:  scroll, scrolling
React Scrolllock
🔒 Prevent scroll on the <body />
Stars: ✭ 393 (-60.26%)
Mutual labels:  scroll, scrolling
Wxp Ui
小程序插件合集(下拉刷新, 拖拽排序, 索引列表, 日期选择, 侧滑删除...)
Stars: ✭ 636 (-35.69%)
Mutual labels:  drag, scroll
Scrolldir
0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉
Stars: ✭ 679 (-31.34%)
Mutual labels:  scroll, scrolling
Txscrolllabelview
🌭TXScrollLabelView, the best way to show & display information such as adverts / boardcast / onsale e.g. with a customView.
Stars: ✭ 714 (-27.81%)
Mutual labels:  scroll, scrolling
srraf
Monitor scrolling and resizing without event listeners.
Stars: ✭ 26 (-97.37%)
Mutual labels:  scrolling, scroll
scrollparent.js
A function to get the scrolling parent of an html element.
Stars: ✭ 51 (-94.84%)
Mutual labels:  scrolling, scroll
Jump.js
A modern smooth scrolling library.
Stars: ✭ 3,459 (+249.75%)
Mutual labels:  scroll, scrolling
volx-recyclerview-fast-scroll
An easy to use implementation for fast scroll recyclerview
Stars: ✭ 34 (-96.56%)
Mutual labels:  scrolling, scroll
PenTerm
Terminal config for pentesters.
Stars: ✭ 20 (-97.98%)
Mutual labels:  scrolling, mouse
Scrollbooster
Enjoyable content drag-to-scroll library
Stars: ✭ 775 (-21.64%)
Mutual labels:  drag, scroll
use-scroll-direction
A simple, performant, and cross-browser hook for detecting scroll direction in your next react app.
Stars: ✭ 24 (-97.57%)
Mutual labels:  scrolling, scroll
mousecase
A JavaScript utility enabling horizontal dragging on mousedown events 🖱
Stars: ✭ 35 (-96.46%)
Mutual labels:  scrolling, mouse
Recyclerview Fastscroller
A fully customizable Fast Scroller for the RecyclerView in Android, written in Kotlin
Stars: ✭ 585 (-40.85%)
Mutual labels:  scroll, scrolling

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). It has no dependencies and is written in vanilla JavaScript (which means it works anywhere).

Usage

Download the and unpack distribution, or install it using Bower:

$ bower install dragscroll

or npm:

$ npm install dragscroll

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

<script src="path/to/dragscroll.js"></script>

Add the dragscroll class to a scrollable element:

<div class=dragscroll>
    Big text goes here...
</div>

That's it! Now you can scroll it by dragging. You can also add the dragscroll class to the <body> 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).

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].