[React]取代Scroll Bar

import React from "react";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.move = false;
    this.originalPositionY = 0;
  }

  componentDidMount() {
    this.content.addEventListener("mousedown", this.onMouseDown, false);
    this.content.addEventListener("mouseup", this.onMouseUp, false);
    this.content.addEventListener("mousemove", this.onMouseMove, false);
  }

  onMouseDown = e => {
    this.move = true;
    this.originalPositionY = e.clientY;
    console.log("onMouseDown", this.originalPositionY);
  };
  onMouseUp = () => {
    this.move = false;
    console.log("onMouseUp");
  };
  onMouseMove = e => {
    if (!this.move) return;
    this.move = true;
    const newPositionY = this.originalPositionY - e.clientY;
    console.log(parseInt(this.content.style.top, 10));
    const afterAdd = parseInt(this.content.style.top, 10) + newPositionY * 2;
    if (afterAdd > 0 || afterAdd < -400) return;
    this.content.style.top =
      parseInt(this.content.style.top, 10) + newPositionY * 2 + "px";
    console.log(parseInt(this.content.style.top, 10));
    this.originalPositionY = e.clientY;
  };

  render() {
    return (
      <div
        className="App"
        style={{ position: "relative", height: "400px", overflow: "hidden" }}
      >
        <div
          style={{
            width: "400px",
            height: "800px",
            backgroundColor: "pink",
            position: "absolute",
            top: "0px"
          }}
          ref={r => (this.content = r)}
        >
          <img
            alt=""
            src="https://www.chuangkit.com/yy-folder/img/ctp5.jpg"
            style={{ height: "100%" }}
          />
        </div>
      </div>
    );
  }
}