React Indiana Drag Scroll

Implements scroll on drag

Examples / Sandbox

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 (
      <ScrollContainer className="scroll-container">
        { ... }
      </ScrollContainer>
    )
  }
}

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 innerRefproperty 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