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滚动并将其放在底部

React.js保持底部滚动

2 个答案: