React onWheel检测滚动条上是否发生了事件

时间:2017-10-30 18:46:34

标签: javascript reactjs scroll

是否可以在onWheel事件中检测事件是否发生在滚动条上?考虑到每个平台/操作系统上的滚动条可能有不同的宽度/高度?

function isOnScrollbar(e) {
  // how do I implement this?
  return false
}

class MyComponent extends React.Component {
  @autobind onWheel(e) {
    if(!isOnScrollbar(e)) {
       e.preventDefault()
       // we are inside the content area, do application specific logic
    } else {
       // we are on a scrollbar, keep standard scrolling behaviour
    }
  }

  render() {
    const containerStyle = { width: 300, height: 300, overflow: 'scroll' }
    const contentStyle = { width: 500, height: 500 }
    return <div style={containerStyle} onWheel={this.onWheel}>
      <div style={contentStyle}>Content</div>
    </div>
  }
}

0 个答案:

没有答案