react scrolling a div by dragging the mouse?

Question

I am trying to figure out how to scroll through a div using the mouse (left hold and drag), but I can't find anything useful.

If anyone has used trello, im trying to emulate the ability to drag horizontally using the mouse, instead of the scrollbar.

Most of the other plugins out there are for JQuery, and I would like either a native javascript solution or one with React.

I have looked at:

1. https://github.com/asvd/dragscroll http://asvd.github.io/dragscroll/

But it won't allow you to select elements inside of it, which is something that i also need.

Are there any other suitable plugins for React out there?

Answer 1

1. Maintain MouseDown location and scroll info onmousedown of window
2. Add mousemove listener on mousedown of scroller
3. Calculate scrollLeft and scrollTop according to window clientX and clientY in mousemove

4. Remove mousemove on window's onmouseup listener.

   class Application extends React.Component {
   
     state = {isScrolling: false};
   
     componentWillUpdate = (nextProps, nextState) =>{
        if(this.state.isScrolling !== nextState.isScrolling ) {
          this.toggleScrolling(nextState.isScrolling);
         }
     };
   
     toggleScrolling = (isEnable) => {
       if (isEnable) {
         window.addEventListener('mousemove', this.onMouseMove);
         window.addEventListener('mouseup', this.onMouseUp);
       } else {
         window.removeEventListener('mousemove', this.onMouseMove);
       }
     };
   
     onScroll = (event) => {
     };
   
     onMouseMove = (event) => {
       const {clientX, scrollLeft, scrollTop, clientY} = this.state;
       this._scroller.scrollLeft = scrollLeft - clientX + event.clientX;
       this._scroller.scrollTop = scrollTop - clientY + event.clientY;
     };
   
     onMouseUp =  () => {
       this.setState({isScrolling: false, 
                      scrollLeft: 0, scrollTop: 0,
                      clientX: 0, clientY:0});
     };
   
     onMouseDown = (event) => {
       const {scrollLeft, scrollTop} = this._scroller;
       this.setState({isScrolling:true, scrollLeft, scrollTop, clientX:event.clientX, clientY:event.clientY});
     };
   
     attachScroller = (scroller) => {
       this._scroller = React.findDOMNode(scroller);
     };
   
     render() {
       return <div className='container'>
         <div className="scroller"
           ref={this.attachScroller}
           onMouseDown={this.onScroll}
           onScroll={this.onMouseMove}
           >
           <div className="child"/>
           </div>
       </div>;
     }
   }
   
   /*
    * Render the above component into the div#app
    */
   React.render(<Application />, document.getElementById('app'));
   

helpful library

http://smikhalevski.github.io/react-scroll-box/

https://gist.github.com/gaearon/150fa1bed09c92abdb46

https://github.com/qiaolb/react-dragscroll