Javascript ReactJS-为滚动添加动量

我创建了一个允许拖动和滚动功能的组件。我现在的问题是，我不知道如何在鼠标向上滚动时增加动量（而且反弹效果也没那么重要）。 重要的部分是：如何在一段时间内更新组件（取决于拖动的强度）

下面是我的滚动组件代码：

class DraggingScrollView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isScrolling: false,
      scrollLeft: 0,
      clientX: 0,
    };
    this.scrollContainer = React.createRef();
    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
  }

  componentWillUpdate(nextProps, nextState) {
    const { isScrolling } = this.state;
    if (isScrolling !== nextState.isScrolling) {
      this.setScrollingEnabled(nextState.isScrolling);
    }
  }

  setScrollingEnabled(isEnabled) {
    if (isEnabled) {
      window.addEventListener('mousemove', this.handleScroll);
    } else {
      window.removeEventListener('mousemove', this.handleScroll);
    }
  }

  handleMouseDown(event) {
    const { clientX } = event;
    const { scrollLeft } = this.scrollContainer.current;
    this.setState({
      isScrolling: true,
      scrollLeft,
      clientX,
    });
  }

  handleMouseUp() {
    this.setState({
      isScrolling: false,
      scrollLeft: 0,
      clientX: 0,
    });
  }

  handleScroll(event) {
    const { scrollLeft, clientX } = this.state;
    const scrollContainer = this.scrollContainer.current;
    const scrollDestination = scrollLeft + clientX - event.clientX;
    scrollContainer.scrollLeft = scrollDestination;
  }

  render() {
    const { children, scrollContainerHeight } = this.props;
    return (
      <div
        id="scrollContainer"
        ref={this.scrollContainer}
        role="presentation"
        style={{ paddingTop: scrollContainerHeight }}
        onMouseDown={this.handleMouseDown}
        onMouseUp={this.handleMouseUp}
      >
        <div id="scrollContentContainer">{children}</div>
      </div>
    );
  }
}

类DragingScrollView扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
伊斯克罗林：错，
左：0，
客户端：0，
};
this.scrollContainer=React.createRef（）；
this.handleMouseDown=this.handleMouseDown.bind（this）；
this.handleMouseUp=this.handleMouseUp.bind（this）；
this.handleScroll=this.handleScroll.bind（this）；
}
组件将更新（下一步，下一步状态）{
const{isScrolling}=this.state；
如果（isScrolling！==nextState.isScrolling）{
本.设置CrollingEnabled（下一个状态为IsCrolling）；
}
}
设置克罗林化（已启用）{
如果（已启用）{
window.addEventListener（'mousemove'，this.handleScroll）；
}否则{
window.removeEventListener（'mousemove'，this.handleScroll）；
}
}
handleMouseDown（事件）{
const{clientX}=event；
const{scrollLeft}=this.scrollContainer.current；
这是我的国家({
伊斯克罗林：是的，
向左滚动，
clientX，
});
}
handleMouseUp（）{
这是我的国家({
伊斯克罗林：错，
左：0，
客户端：0，
});
}
handleScroll（活动）{
const{scrollLeft，clientX}=this.state；
const scrollContainer=this.scrollContainer.current；
constScrollDestination=scrollLeft+clientX-event.clientX；
scrollContainer.scrollLeft=scrollDestination；
}
render（）{
const{children，scrollContainerHeight}=this.props；
返回(
{儿童}
);
}
}

您可能希望查看

请求动画帧

，但用户滚动和拖动的强度使这一过程更加复杂。在这里查看示例。。您可能想查看

requestAnimationFrame

，但用户滚动和拖动的强度使这一过程更加复杂。在这里查看示例。。