スクロールテーブルの前方親オンホイール

Question

<Table />要素を含む外側の親の<div />コンテナがあります。マウスが現在<Table />を超えていなくても、<div />という要素のイベントの<Table />をスクロールできるようにしたいと考えています。

onWheelイベントをリスニングするテーブル要素とイベントハンドラへの参照がありますが、そのイベントをテーブルに転送する方法を把握することができませんでした。私はcodePen illustrating a scroll redirection

を作っ

Answer 1

これは、別の<div>のscrollTop位置を設定し、その後の行動をデフォルトのスクロール（evt.preventDefault()）を無効にし、親<div>（赤色の背景を持つ1）にwheelEventを聞きます。

ここでコンポーネントのコードです：

class RedirectScroll extends React.Component { 
    parentOnScroll = (evt) => { 
     evt.preventDefault(); 
     const scrollTo= (evt.deltaY) + this.box.scrollTop; 
     this.box.scrollTop = scrollTo; 
    } 
    render() { 
     return (
      <div className="parent" onWheel={this.parentOnScroll}> // Listen scrolls on this div 
       <div className="scrollablebox" ref={(box) => this.box = box}> 
        // Some content 
       </div> 
      </div> 
     ); 
    } 
} 

は、私は、これはあなたが探しているものであると思います。

Answer 2

テーブル本体をスクロールしたいと思うので、これを試すことができます。

class Table extends React.Component { 
 

 
    constructor() { 
 
     super(); 
 
     this.callback = this.callback.bind(this); 
 
     this.body = null; 
 
    } 
 

 
    callback(ev) { 
 
     
 
     this.body.scrollTop += ev.deltaY; 
 
    } 
 
    
 
    render() { 
 
     return <div onWheel={this.callback}> 
 
      <table> 
 
       <tbody ref={c => this.body = c}> 
 
        {[1, 2, 3, 4, 5, 6,].map(i => <tr> 
 
         <td>{i}</td> 
 
        </tr>)} 
 
       </tbody> 
 
      </table> 
 
     </div>; 
 
    } 
 
} 
 

 
ReactDOM.render(<Table />, document.getElementById('root'));

tbody { 
 
    display: block; 
 
    height: 3rem; 
 
    overflow: scroll; 
 
} 
 

 
tr:nth-child(2n+1) { 
 
    background-color: #ddf; 
 
} 
 

 
tr:nth-child(2n) { 
 
    background-color: #eef; 
 
} 
 

 
table { 
 
    margin: auto; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    width: 5rem; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    color: #00f; 
 
} 
 

 
div { 
 
    width: 100%; 
 
    display: block; 
 
    text-align: center; 
 
    background-color: #99f; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>