reactjs - 添加新数据时如何使滚动条始终停留在底部

Question

我有一个可滚动的内容，当我们不断插入新数据时，我们可以看到滚动条出现。我想将滚动条放置在 always at the bottom 以避免手动滚动。以 Messenger 为例，当您输入消息并提交时，我们的滚动高度增加，但滚动不会移动上下。

我尝试使用以下技术来做同样的事情:

const App = () => {
    const myRef = useRef<HTMLDivElement>(null)

    const [msgs, setMsgs] = useState<string[]>([])
    const [text, setText] = useState<string>("")

    const scrollToMyRef = () => {
        if (myRef.current) {
            myRef.current.scrollTop = myRef.current.scrollHeight
        }
    };

    const handleInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
            // setText('')
            setMsgs(prevState => [...prevState, text])
        }
    }

    useEffect(() => {
        scrollToMyRef()
    }, [msgs])

    return (
        <div className="app">
            <div className="container" ref={myRef}>
                <div className={"messages-list"}>
                    {
                        msgs.map((msg, i) => (
                            <div key={i}>{msg}</div>
                        ))
                    }
                </div>
                <div className="form">
                    <input
                        type={"text"}
                        onKeyPress={e => handleInput(e)}
                        value={text}
                        onChange={(e) => setText(e.target.value)}
                    />
                    <input type={"button"} value={"add"} />
                </div>
            </div>
        </div>
    );
} 

问题是我们的滚动条上下移动，导致内容“闪烁/闪烁”。为什么会发生这种情况？

我也试过 scrollIntoView 但它也没有提供所需的输出。

这是一个重现问题的沙箱:https://kfkx5.csb.app/

Answer 1

[编辑]:我刚找到this codePen .它完全符合您的要求:)

---

我猜你要找的是:

window.scrollTo(0,document.body.scrollHeight);

代替:

myRef.current.scrollTop = myRef.current.scrollHeight;

当然，你需要通过可滚动 block 改变document.body.scrollHeight。如果您的引用未用于其他任何用途，您可能可以清理一些代码。

这里是 the repro on Stackblitz .我只是根据您自己的代码更改了上面的行。

附言:我从 this SO thread 得到了这个答案:)