resact.js保持滚动在底部

您提供的信息很少,但是由于我们知道它是在React中,所以您可以使用JavaScript来确保div一直滚动到底部。

class FullMenu extends Component {
  constructor() {
    super()
    this.state = {
      class: "",
      div: ""
    }
    this.scrollToBottom = this.scrollToBottom.bind(this);
  }
  componentDidMount() {
    setInterval(this.scrollToBottom, 20);
  }
  scrollToBottom() {
    var scrollingElement = (document.scrollingElement || document.body); /* you could provide your scrolling element with react ref */
    scrollingElement.scrollTop = scrollingElement.scrollHeight;
  }
  render() {
    return (
      <div id="FullMenu">
        {this.state.div}
        <div id="triangleDiv">
          <img
            className={this.state.class}
            onClick={() => {
              this.setState({ class: "bounce" })
              let that = this
              setTimeout(function() {
                that.setState({
                  class: "",
                  div: <div className="menuDiv" />
                })
              }, 1000)
            }}
            src={triangle}
            id="triangle"
          />
        </div>
      </div>
    )
  }
}

注意,上面的解决方案始终保持窗口滚动。如果你只想在动画中滚动它,那么你应该使用react的 CSSTransitionGroup 使用 clearInterval transitionEnd 生命周期挂钩。

你所要做的就是设置div样式

display: flex;
flex-direction: column-reverse

这将翻转div滚动条并将其放置在底部