javascript - 拖动以滚动到元素之外

Question

我已经制作了一个可滚动的容器，但是当鼠标指针在按下时离开元素框时它的行为存在问题。当它发生时，滚动与我在 Firefox 中想要的方向相反，并在 Edge 中停止。在 Firefox 中滚动似乎是浏览器的本机行为。是否有可能使它像光标在元素上时一样工作？

密码笔

HTML

<div id="app"></div>

JS

import React from "https://cdn.skypack.dev/react"
import ReactDOM from "https://cdn.skypack.dev/react-dom"

const HelloWorld = () => <h1>Hello, World!</h1>

const Scrollable = props => {
  const ref = React.useRef()
  const [scroll, setScroll] = React.useState({ isScrolling: false, clientX: 0 })
  
  const onMouseDown = e => {
    setScroll({ ...scroll, isScrolling: true, clientX: e.clientX })
  }

  const onMouseUp = () => {
    setScroll({ ...scroll, isScrolling: false })
  }

  const onMouseMove = e => {
    const { clientX } = scroll
    if (scroll.isScrolling) {
      const dx = e.clientX - clientX
      const scrollLeft = ref.current.scrollLeft - dx

      if (scrollLeft < 0 || scrollLeft > ref.current.scrollLeftMax) return

      ref.current.scrollLeft = scrollLeft
      setScroll({ ...scroll, clientX: e.clientX })
    }
  }  
  
  return(
    <div className="scrollable" ref={ref}
      style={{'overflow-x': 'auto', width: '200px', 'margin-left': '100px' }}
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
      onMouseMove={onMouseMove}
    >
      {props.children}
    </div>
  )
}
      
ReactDOM.render(<Scrollable><div style={{ height: '100px', width: '1000px', background: 'red' }}></div></Scrollable>, document.getElementById('app'))

标签： javascripthtmlreactjs