如何区分以编程方式滚动和用户使用鼠标滚轮或拖动滚动条滚动-javascript

Question

我有一个react消息包装器组件，当有新消息出现时，它滚动到顶部，因此用户可以看到它，但是我们希望如果用户滚动他自己，以便阅读旧消息，例如，不要将其移出任务/地点。

以编程方式滚动（出现新消息时）：

this.wrapperDivRef.scrollTop = this.wrapperDivRef.scrollHeight

我确实捕获了（on）滚轮和（on）滚动事件以供用户滚动，但是（在）以编程方式完成滚动时，也会触发（on）滚动...

这是代码，因此到目前为止，我以唯一可能的方式看到了它，即如果您使用滚轮鼠标进行滚动，则表示用户已完成，并且如果您通过拖动滚动条来进行了代码不会因用户触发而被考虑：

class MessagesWrapper extends Component {
  state = {
    userScroll: false,
  }

  componentDidMount() {
    if (this.wrapperDivRef) {
      this.wrapperDivRef.scrollTop = this.wrapperDivRef.scrollHeight
    }
    this.setScrollTimeout()
    if (window.addEventListener) {
      window.addEventListener('wheel', this.mouseWheelEvent, false)
    }
  }

  componentDidUpdate(prevProps) {
    // scroll to top only if the user didn't scroll himself
    if (
      prevProps.noOfMessages !== this.props.noOfMessages &&
      !this.state.userScroll
    ) {
      this.wrapperDivRef.scrollTop = this.wrapperDivRef.scrollHeight
      this.setScrollTimeout()
    }
  }

  componentWillUnmount() {
    window.removeEventListener('wheel', this.mouseEvent)
  }

  setScrollTimeout = () => {
    setTimeout(() => {
      if (this.wrapperDivRef) {
        this.wrapperDivRef.scrollTop = this.wrapperDivRef.scrollHeight
        // programatically scroll, not user :)
        this.setState({ userScroll: false })
      }
    }, 300)
  }

  mouseWheelEvent = () => {
    // we do want to enable auto scrolling
    // we do it if the user scrolls to last message
    if (
      this.wrapperDivRef.scrollTop + this.wrapperDivRef.clientHeight ===
      this.wrapperDivRef.scrollHeight
    ) {
      this.setState({ userScroll: false })
    } else {
      this.setState({ userScroll: true })
    }
  }

  handleRef = ref => {
    this.wrapperDivRef = ref
  }

  render() {
    const className = this.props.customHeigth
      ? 'messagesWrapperCustom'
      : 'messagesWrapper'
    return (
      <div className={cn(className, wrapperClassName)} ref={this.handleRef}>
        {this.props.children}
      </div>
    )
  }
}

@Bergi我确实在做，但是您需要像这样检查：

this.wrapperDivRef.scrollTop + this.wrapperDivRef.clientHeight ===
      this.wrapperDivRef.scrollHeigh