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

Overview

React Indiana Drag Scroll

Implements scroll on drag

Examples / Sandbox

NPM Downloads 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 (
      <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

Comments
  • Input onBlur problem

    Input onBlur problem

    Hey, i have problem, when there is input inside ScrollContainer.... and i am clicking inside this container (outside the input)... input event onBlur isn't called... Any workaround for this ? Or incoming fix? Thanks !

    opened by uragecz 16
  • Adding an ignoreElements prop

    Adding an ignoreElements prop

    Pass a string of element selectors such as ".modal" to prevent the scroll behaviour when dragging.

    Typical issue arises when you've got a modal above the <ScrollContainer /> and if you click within that, it'll scroll the container behind it.

    opened by entozoon 16
  • `hideScrollbars` prevents horizontal scrolling

    `hideScrollbars` prevents horizontal scrolling

    if hideScrollbars is true, then you can no longer scroll horizontally with a trackpad or wheel.

    If so, it's probably worth leaving a note in documentation

    As a side note, perhaps it's possible to consider implementing

      &::-webkit-scrollbar {
        display: none;
      }
    

    instead?

    opened by nemosmithasf 15
  • Vertical scroll not working ?

    Vertical scroll not working ?

    Hello,

    I tried to use the plugin like so :

    <ScrollContainer className="scroll-container" vertical={true} horizontal={true}> <MyImage /> </ScrollContainer>

    I am able to scroll horizontally by dragging but I can't move vertically at all. I don't know what I should do.

    Thanks

    opened by donpernino 14
  • Can't scroll when setting scroll-behavior: smooth on <ScrollContainer>

    Can't scroll when setting scroll-behavior: smooth on

    demo: https://codesandbox.io/s/vibrant-silence-vftxz?file=/src/index.js In chrome 88 and 91 it will only scroll laggy about 1~5px in one direction per scroll, no matter how long I've dragged, firefox 89 can even only scroll vertically, safari doesn't get affected since it hasn't support scroll-behavior yet.

    opened by n0099 12
  • Not compatible when scrollable element is wrapped within child component

    Not compatible when scrollable element is wrapped within child component

    Some library or user created components will create one or more elements to wrap long text content in it, such as Grsmto/simplebar, I call this "higher order element". In this example, the accuracy scrollable element is under div[data-simplebar] > div.simplebar-wrapper > div.simplebar-mask > div.simplebar-offset > div.simplebar-content-wrapper, not the first level div[data-simplebar] which will be recognized by react-indiana-drag-scroll as store in this.container.current ref.

    opened by n0099 12
  • onScroll is not triggered with mouse wheel

    onScroll is not triggered with mouse wheel

    Hi,

    thanks again for the great component. I have some issues to get onScroll work with mouse wheel.

    <ScrollContainer className={modalContentClass}
                          horizontal={false}
                          vertical={true}
                          onScroll={this.handleScroll}>
                          {...}
    </ScrollContainer>
    

    This workaround works for me:

                    <ScrollContainer className={modalContentClass}
                        horizontal={false}
                        vertical={true}
                        ref={(node: any) => {
                            if (node && node.container) {
                                // workaround container will not expose scroll with wheel
                                node.container.current.onscroll = this.handleScroll;
                            }
                        }}>
                        {this.getContent()}
                    </ScrollContainer>
    

    Testet on: Firefox 69.0.2/Linux Chromium 77.0.3865.90/Linux with react 16.4.2 & react-indiana-drag-scroll 1.3.0

    Thanks & Best Regards

    opened by smesgr 11
  • Mobile stuttering

    Mobile stuttering

    Hey, I was having severe stuttering at the first attempt to drag scroll in mobile, so I just spent some time debugging and in the end I found a partial solution, which only works with activationDistance={1}.

    I am not sure if this is a common problem, and if this solution opens other problems for other implementations of this library (not my case), and this solution is kinda improvised, so I don't know if it's an immediate pull request worthy solution.

    Here is this published version if needed https://www.npmjs.com/package/@pablosz/react-indiana-drag-scroll

    opened by PabloSzx 10
  • [Request] Option to remove body class

    [Request] Option to remove body class

    Hello,

    I was wondering if it was possible to remove the indiana-dragging class with an option, or if this options could be added as a prop ? I'm setting a grab/grabbing cursor on the element I use the library on (a canvas element) but I have difficulties to override the .indiana-dragging on the body

    (using version 2.01)

    opened by trouba 9
  • Make SCROLL_END_DEBOUNCE a prop

    Make SCROLL_END_DEBOUNCE a prop

    Hey! this is such a nice component, I've been implementing it today.

    I don't really get why SCROLL_END_DEBOUNCE is a constant... changing it to be a prop which defaults to 300 would make it more flexible.. and is a two line change.

    Can you update it? If you want I can make a PR myself. I just don't want to fork out my own package to just change two lines 😄

    opened by jportella93 9
  • There is no response to the components in ScrollContainer.

    There is no response to the components in ScrollContainer.

    The code includes a Touchable component in the ScrollContainer, but this component does not respond when clicked.

    Is there an argument to ScrollConainer that can help?

    return ( <ScrollView horizontal pagingEnabled style={[styles.scrollView]} ref={ref} onScroll={handleScroll} scrollEventThrottle={0} showsHorizontalScrollIndicator={false} onScrollBeginDrag={clearAutoplay} > <View style={[styles.imageContainer, wrapperStyles]}> {!editor && images.map(({ image, type, fileUrl }, i) => ( <View style={[styles.imageWrapper, innerWrapper]}> <ImageItem image={image} type={type} tracks={tracks} options={options} controls={controls} settings={settings} i18n={i18n} css_properties={css_properties} ads={ads} videoData={videoData} fileUrl={fileUrl} /> </View> ))} </View> </ScrollView> ) })

    opened by shunki-github 8
  • style prop isn't applied in v3

    style prop isn't applied in v3

    We needed to jump to v3 to take control over the style injection into shadow roots, but ran into this issue:

    The style override prop is never applied to the ScrollContainer component

    CleanShot 2022-10-24 at 16 44 10@2x

    opened by markphilpot 10
  • Doesn't work with scroll snapping

    Doesn't work with scroll snapping

    I planned to use this great tool for creating a carousel. I didn't want a continous scroll but rather the scrolling to snap to the items with scroll-snap-type: x mandatory. This makes the scrolling area not scrollable at all.

    opened by tonygustafsson 2
  • Dragging becomes inverse if a parent is RTL in Edge

    Dragging becomes inverse if a parent is RTL in Edge

    Hi again! If a parent has style of direction: rtl on Edge the dragging movement becomes inverse, here check this in Edge: https://6vfmu.csb.app/ (editor view)

    opened by abisar 5
Releases(v2.0.0)
  • v2.0.0(Feb 28, 2021)

    The source was rewritten in Typescript completely.

    Breaking changes

    Add the buttons property

    This prop is used to determine the mouse buttons that will activate the scroll on drag. The default value is [0], i.e. scroll on drag is activated by left mouse button only.

    Remove the runtime type checking

    It's recommended to use Typescript for type checking now.

    Add the ScrollEvent to onScroll, onStartScroll, onEndScroll params.

    It's the only argument of this functions now:

    {
        external: boolean;
    }
    

    The external property marks if scrolling was produced outside the container, for example, programatically.

    Source code(tar.gz)
    Source code(zip)
  • V1.7.0(Sep 25, 2020)

    Add the innerRef property

    This property is added to eliminate tedious process of getting element (especially with Typescript).

    This:

    const ref = useRef<ScrollContainer>();
    
    const element = ref.current && ref.current.getElement();
    
    <ScrollContainer ref={ref}> ... </ScrollContainer>
    

    Can be replaced by:

    const ref = useRef<HTMLElement>();
    
    const element = ref.current;
    
    <ScrollContainer innerRef={ref}> ... </ScrollContainer>
    

    It's possible that in second versions the ref forwarding will be added.

    Add the possibility to change the component used for the root node

    Now the type of root node can be set by component property

    <ScrollContainer component="ul"> ... </ScrollContainer>
    

    Prevent scroll container if one can't be scrolled

    If scroll is not possible scroll will be blocked.

    Source code(tar.gz)
    Source code(zip)
  • V1.0.1(Nov 16, 2018)

Owner
If you leave a white post alone it will soon be a black post.
null
A rectangle react component which can be resized and rotated

React-resizable-rotatable-draggable-rectangle A react widget that can be resized and rotated via a handler. Installation npm install --save react-resi

MockingBot 237 Nov 11, 2022
React draggable component

React-Draggable A simple component for making elements draggable. <Draggable> <div>I can now be moved around!</div> </Draggable> Demo Changelog Vers

Samuel Reed 8.1k Jan 1, 2023
:sparkles: A sortable and resizable pane component for React.

Sortable and resizable pane component for react. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage uncontrolled controlled Pr

bokuweb 616 Dec 19, 2022
Unopinionated dropdown component for react.

Unopinionated dropdown component for react.

Akinwunmi Aguda 7 Jul 11, 2022
React draggable component

A simple component for making elements draggable.

RGL 8.1k Jan 8, 2023
Draggable and Resizable component running at 60FPS using React Native Reanimated v2

reanimated-drag-resize Draggable and Resizable React Native Component running at 60FPS using React Native Reanimated v2 Main Dependencies react-native

Fateh Farooqui 39 Dec 28, 2022
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Work in progress react-flow-editor Overview React component to create graphic user interface with: draggable nodes with ports and edges on a directed

Microsoft 102 Dec 29, 2022
React component for a list of draggable collapsible items

react-draggable-list This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items: The abov

Streak 282 Dec 16, 2022
A simple draggable list component for React

react-drag-listview React drag list component. install Example Drag Rows Simple dragging demo Dragging Ant-Design table Dragging Ant-Design table widt

浅搁 224 Oct 9, 2022
"Drag to resize" (sizing) as React Component.

react-drag-sizing "Drag to resize" (sizing) as React Component Rewritten with TS & React-hooks Polyfill workaround with React < 16.8 Support both mous

Fritz Lin 13 Nov 7, 2022
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.

?? react-butterfiles A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field

Adrian Smijulj 45 Aug 26, 2022
A simple component for making elements draggable

React Draggable Component A simple component for making elements draggable.

Haikel Fazzani 9 Sep 17, 2022
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.9k Dec 31, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.7k Jan 7, 2023
Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

null 9.4k Jan 2, 2023
🔀 Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Vojtech Miksu 1.3k Dec 30, 2022
A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

RGL 16.9k Jan 2, 2023
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.7k Jan 6, 2023
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Claudéric Demers 6.5k Jan 7, 2023