React.js 在底部保持滚动

Question

我有一个高度作为动画增长的div 。 而不是在可视区域之外增长（并且用户必须向下滚动），我希望窗口自动随div高度滚动。 锁定页面底部的滚动位置会起作用。

!!这是在 React 中！！

我已经尝试了数百万个 google/SO 答案，但没有一个工作/不够具体。

代码https://github.com/coryb08/corydbaker npm install && npm start

Answer 1

您提供的信息很少，但由于我们知道它在 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生命周期钩子中停止这种行为。

Answer 2

你可以单独使用 CSS 你所要做的就是设置 div 样式

display: flex;
flex-direction: column-reverse

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