Question

我不知道为什么我的scroll to bottom使用ref不能使用我的下面的代码

class myComponent extends Component {

    componentDidMount() {
        console.log('test') // it did triggered
        this.container.scrollTop = -312
    }


    render() {
        return(
            <div className="Panel">
                <div ref={elem => this.container = elem}>
                   {/*... list */}
                </div>
            </div>
        )
    }
}

我的面板不等于窗口高度，想象一个仪表板应用程序，它包裹在正确的内容区域，但为什么我的scrollTop不能在这种情况下工作？ componentDidMount确实触发了。

Answer 1

正如评论中所提到的，scrollTop不能是否定的。其值确定从元素顶部滚动的距离。默认情况下会显示元素的顶部，因此使用负滚动条没有意义。

除此之外，您的代码应该可以正常工作。

查看下面的演示，它会自动滚动到<ul>：

的底部

＆＃13;

class MyApp extends React.Component {
  constructor() {
    super();
  }
  componentDidMount() {
    this.container.scrollTop = this.container.scrollHeight
  }
  render() {
    return (
      <ul ref={elem => this.container = elem}>
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
      </ul>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

＆＃13;

ul {max-height: 110px;overflow: auto;}
li {height: 100px;background: #ffaaaa;}
li:nth-child(2) {background: #aaffaa;}
li:nth-child(3) {background: #aaaaff;}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

使用ref滚动到底部不起作用

1 个答案: