Need help with react-indiana-drag-scroll?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Norserium
262 Stars 26 Forks Other 70 Commits 7 Opened issues

Description

React component which implements scrolling via holding the mouse button or touch

Services available

!
?

Need anything else?

Contributors list

# 149,716
Vue.js
advance...
CSS
HTML
51 commits
# 628,394
ESLint
Babel
CSS
HTML
1 commit
# 22,049
vercel
ZEIT
Objecti...
gatsby
1 commit
# 149,349
Shell
macOS
Electro...
scrolle...
1 commit
# 301,744
HTML
Gulp
Front e...
React
1 commit
# 87,984
yarn
fastify
Electro...
altair
1 commit

React Indiana Drag Scroll

Implements scroll on drag

Examples / Sandbox

NPM JavaScript Style Guide

Welcome to journey!

Try it yourself! Go to demo website.

Install

npm install --save react-indiana-drag-scroll
yarn add react-indiana-drag-scroll

Usage

import React, { Component } from 'react'

import ScrollContainer from 'react-indiana-drag-scroll'

class Example extends Component { render () { return ( { ... } ) } }

Component properties

| Prop | Type | Description | Default | | ------------------ | ------------ | ----------------------------------------------------------------------------------------- | ------- | | vertical | Bool | Allow vertical drag scrolling | true | | horizontal | Bool | Allow horizontal drag scrolling | true | | hideScrollbars | Bool | Hide the scrollbars | true | | activationDistance | Number | The distance that distinguish click and drag start | 10 | | children | Node | The content of scrolling container | | onScroll | Function | Invoked when user scrolling container | | onEndScroll | Function | Invoked when user ends scrolling container | | onStartScroll | Function | Invoked when user starts scrolling container | | onClick | Function | Invoked when user clicks the scrolling container without dragging | | component | String | The component used for the root node. | 'div' | className | String | The custom classname for the container | | draggingClassName | String | The classname for the container during dragging | | style | Number | The custom styles for the container | | innerRef | ElementType | The ref to the root node (experimental alternative to

getElement
) | | ignoreElements | String | Selector for elements that should not trigger the scrolling behaviour (for example,
".modal, dialog"
or
"*[prevent-drag-scroll]"
) | | nativeMobileScroll | Bool | Use native mobile drag scroll for mobile devices | true | buttons | Array| The list of mouse button numbers that will activate the scroll by drag | [0]

Static functions

| Name | Returns | Description | | ------------------ | ----------- | -------------------------------------------------------------------------------------- | | getElement | HTMLElement | Returns the HTML element |

FAQ

How to set the initial scroll?

To set initial scroll you need get the ref to the root node of the

ScrollContainer
. It can be implemented by using
innerRef
property
or the static function
getElement
. At the worst you can use the
ReactDOM.findDOMNode
method.

License

The source code is licensed under MIT, all images (except hieroglyphs) are copyrighted to their respective owner © Norserium

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.