React.js – Как проверить, находится ли div внизу экрана (динамически) ⇐ CSS

[Anonymous]

Есть ли способ проверить, находится ли элемент div внизу другого элемента div (действуя как родительский элемент или контейнер).

Что я пробовал

По сути, я сделал демо, в котором есть дочерние элементы (

Код: Выделить всё

items, setItems

) в div, которые можно добавлять и удалять, а также менять их высоту, нажимая на div (здесь это важно). Также есть еще один div, который не находится в состоянии items, где я хочу изменить заголовок этого элемента, если он находится внизу его родительского div (также элементы имеют то же самое родительский элемент, как и этот div).

Проблема с моим решением

Я попробовал что-то, где я смотрю на getBoundingClientRect() родительского контейнера и этого «синего» div, давайте назовем его так, и он будет работать нормально, ТОЛЬКО ЕСЛИ элементы имеют одинаковую высоту, но как только он будет удален, элемент и измените его высоту, нажав на элемент div, это не сработает. Будет показано, что он находится в нижней части экрана (заголовок будет правдивым), но на самом деле это не так.

Мой код

App.js – только для демонстрационных целей

Код: Выделить всё

import "./styles.css";
import { useState, useEffect, useRef } from "react";

export default function App() {
const arrayItems = [
{
id: 1,
name: "test",
resized: false
},
{
id: 2,
name: "test1",
resized: false
},
{
id: 3,
name: "test2",
resized: false
}
];
const [items, setItems] = useState(arrayItems);
const [title, setTitle] = useState(false);
const parentRef = useRef(null);
const itemsRef = useRef(null);

useEffect(() => {
if (
parentRef?.current.getBoundingClientRect().bottom -
itemsRef?.current.getBoundingClientRect().height  {
const maxValue = Math.max(...items.map((item) => item.id)) + 1;
setItems((prev) => [
...prev,
{ id: maxValue, name: "testValue", resized: false }
]);
};

const handleDelete = () => {
setItems((prev) => prev.slice(0, prev.length - 1));
};

const handleResize = (item) => {
setItems((prev) =>
prev.map((itemOld) => {
if (itemOld.id === item.id) {
return itemOld.resized === true
? { ...itemOld, resized: false }
: { ...itemOld, resized: true };
} else {
return itemOld;
}
})
);
};

console.log(items);

return (

Add new
Delete last
Hello CodeSandbox
Start editing to see some magic happen!

{items?.map((item) => {
return (
 handleResize(item)}
style={{ height: item.resized ? "70px" : "20px" }}
key={item.id}
className="container-item"
>
{item.name}

);
})}

{title ? "At the bottom" : "Not at the bottom"}



);
}

styles.css

Код: Выделить всё

.App {
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 1rem;
}

* {
margin: 0;
padding: 0;
}

.container {
width: 600px;
height: 300px;
background-color: gray;
display: flex;
flex-direction: column;
}

.container-item {
width: 100%;
background-color: hotpink;
}
#title-div {
width: 100%;
padding: 1rem;
background-color: blue;
color: white;
}

Что я хочу сделать

Как следует из названия, я хочу посмотреть, находится ли div внизу контейнерного/родительского div. То есть, и другие элементы в этом родительском div не могут мешать этому div, в том смысле, что добавление, изменение размера, удаление этих элементов не приведет к внезапному изменению положения div, который я хочу проанализировать (чтобы увидеть, находится ли он на нижняя часть экрана)

Подробнее здесь: https://stackoverflow.com/questions/737 ... ynamically