Как я могу прокрутить вниз дочернего div без прокрутки окна?
У меня есть приложение, которое содержит небольшое окно чата. Как обычно с чатами, я хочу, чтобы он по умолчанию прокручивался вниз и прокручивался до последнего сообщения, если оно добавляется.
Я уже проверил некоторые другие решения, такие как это , в котором предлагалось использовать useRef и функцию scrollToElement. Проблема, с которой я столкнулся, заключается в том, что он не прокручивается вниз в нужном мне элементе, а вместо этого прокручивает все окно до этого элемента. Я создал codeandbox, чтобы проиллюстрировать свою настройку здесь: https://codesandbox.io/s/upbeat-albattani-zxprz?file=/src/App.js
Используя решение, указанное выше, все окно начинает прокручиваться, а не только серое поле.
Как я могу настроить это под свои требования?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Добавь это
дисплей: 'гибкий',
flexDirection: «обратный столбец»,
import React from "react";
import "./styles.css";
export default function App() {
return (
<div
className = "App"
style = {{
height: "110vh",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<div
style = {{ display: "flex", overflow: "hidden", position: "relative" }}
>
<div
style = {{
display:'flex',
flexDirection:'column-reverse',
overflow: "auto",
padding: "2rem",
backgroundColor: "#ebebeb",
height: "300px",
fontSize: "2rem"
}}
>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
</div>
</div>
</div>
);
}
Вы можете использовать метод scrollTo в окне.
например window.scrollTo(x-axis,y-axis)
и поскольку точное количество пикселей в нижней части страницы постоянно меняется в зависимости от содержимого страницы, вы можете использовать это свойство для тела document.body.scrollHeight
и ваш код будет выглядеть так window.scrollTo(0,document.body.scrollHeight);
** поскольку вы используете реакцию, добавьте код прокрутки внутри метода useEffect или componentDidMount
это не обязательно должно быть тело, это также может быть элемент div, например element.scrollHeight