javascript - 在 React 中滚动到溢出的 div 的底部

Question

我有一个 ul，带有 max-height 和 overflow-y: auto。

当用户输入足够多的 li 元素时，ul 开始滚动，但我想要最后一个 li 的 形式 在其中始终存在并可供用户查看。

我已经尝试实现一个如下所示的 scrollToBottom 函数:

scrollToBottom() {
    this.formLi.scrollIntoView({ behavior: 'smooth' });
}

但这只会让 ul 跳到屏幕顶部并显示带有表单的 li 作为唯一可见的东西。

有没有更好的方法来实现这一点？我发现的答案往往有点老，并且使用 ReactDOM。谢谢!

CSS:

.prompt-box .options-holder {
    list-style: none;
    padding: 0;
    width: 95%;
    margin: 12px auto;
    max-height: 600px;
    overflow-y: auto;
}

HTML:

<ul className='options-holder'>
    {
        this.state.items.map((item, index) => (
            <li key={item.id} className={`option ${index === 0 ? 'first' : ''}`}>
                <div className='circle' onClick={this.removeItem} />

                <p className='item-text'>{ item.text }</p>
            </li>
        ))
    }

    <li key={0} className={`option form ${this.state.items.length === 0 ? 'only' : ''}`} ref={el => (this.formLi = el)}>
        <div className='circle form' />

        <form className='new-item-form' onSubmit={this.handleSubmit}>
            <input 
                autoFocus 
                className='new-item-input' 
                placeholder='Type something and press return...' 
                onChange={this.handleChange} 
                value={this.state.text}
                ref={(input) => (this.formInput = input)} />
        </form>
    </li> 
</ul>

Answer 1

我有一个填充页面高度的容器。这个容器有 display flex 和 flex direction column。然后我有一个 Messages 组件，它是一个 ul，每条消息有一个 li 加上一个特殊的 AlwaysScrollToBottom 组件作为最后一个 child ，在 useEffect 的帮助下，滚动到列表的底部。

const AlwaysScrollToBottom = () => {
  const elementRef = useRef();
  useEffect(() => elementRef.current.scrollIntoView());
  return <div ref={elementRef} />;
};

const Messages = ({ items }) => (
  <ul>
    {items.map(({id, text}) => <li key={id}>{text}</li>)}
    <AlwaysScrollToBottom />
  </ul>
)

const App = () => (
  <div className="container">
    <Messages items={[...]}>
    <MessageComposer />
  </div>
)

CSS 是

.container {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

ul {
  flex-grow: 1;
  overflow-y: auto;
}

MessageComposer 为简洁起见已被省略，它包含用于发送消息的表单、输入字段等。