通过拖动鼠标来反应滚动div？

Question

我试图弄清楚如何使用鼠标滚动div(左保持和拖动),但我找不到任何有用的东西.

如果有人使用了trello,我试图模拟使用鼠标而不是滚动条水平拖动的能力.

大多数其他插件都是针对JQuery的,我想要一个原生的javascript解决方案或一个React的解决方案.

我看过:

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

但它不允许你选择里面的元素,这也是我需要的东西.

React还有其他合适的插件吗？

Answer 1

1. 保持MouseDown的位置，并在窗口的mousedown上滚动信息
2. 在滚动条的mousedown上添加mousemove侦听器
3. 根据mousemove中的窗口clientX和clientY计算scrollLeft和scrollTop

4. 在窗口的onmouseup侦听器上删除mousemove。

   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'));
   

有用的图书馆

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

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

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