一个div内容需要时刻出现在父元素（设置了overflow-y：scroll）的底部，保证聊天信息时

Question

问题一、项目是一个聊天的应用，需要实时将最新消息展示在聊天窗口，使用了scrollIntoView方法

id为bottom的div是我想放在最底部的，只要它能够展示，其他的聊天信息也能在它上面展示

document.querySelector("#bottom").scrollIntoView();  

结果ieedge，chrome均报错:

TypeError: Cannot read property 'scrollIntoView' of null;//chrome

TypeError: Unable to get property 'scrollIntoView' of undefined or

null reference//ieedege

Answer 1

render()方法是react组件必须的，它检查this.props和this.state并且返回一个React元素，我们也可以返回null或false，代表我们不想有任何的渲染。无法获取到相应元素的属性，render()方法应该是一个纯方法，即它不会修改组件的state，在每一次调用时返回同样的结果。它不直接和浏览器交互，如果我们想要交互，应该在componentDidMount()或者其他的生命周期函数里面。

Answer 2

给父容器一个定位，下面留点padding，id为bottom的div绝对定位到底部