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 | | className | String | The custom classname for container | | style | Number | The custom styles for container | | 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

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 main DOM element of the ScrollContainer. It can be implement by using ReactDOM.findDOMNode or by using the static function getElement (this approach is available in the strict mode by the way).

License

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