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 滾動並將其放置在底部