reactのlistでscrollIntoView
reactでも要素を追加したときに、そこにシュッとスクロールしたい
scrollIntoView使うと楽だが、elementに直接さわれないとだめ
useRefする
あとで清書するが、こんな感じで動きた
refが常に一番最後を向くようにする
なんでこれで動くんだ？
code:js
function App() {
const items, setitems = useState([])
const ref = useRef();
useEffect(() => {
if (ref?.current) {
ref.current.scrollIntoView({ behavior: "smooth", block: "start" });
}
}, items.length);
return (
<>
<div
style={{
overflow: "auto",
background: "lightgray",
maxHeight: "50vh",
}}
{items.map(({ text, key }, i) => (
<p key={key} ref={i === history.length - 1 ? ref : null}>
{text}
</p>
))}
</div>
</>
);
}
他にも、追加時にそれだとわかるようにしてやればうまく動きそうな気がする
keyでrefのマップを作るか、なんか必要な部分だけうまくrefを握るようにするか
shouldScroll的なboolをitemに持ってうまくやれる？
いや、スクロールしたいitemのkeyさえとれれば良さそう
scrollKey === key ? ref : null
同じ感じでハイライトCSSアニメーションとか入れると良さそう