React.js：如何动态检测Div是否处于父容器底部？

我看到你遇到了检测蓝色div是否处于父容器底部的问题，之前用getBoundingClientRect()的判断逻辑有偏差，导致在元素增删或高度调整后出现错误结果。咱们一步步来解决这个问题。

原方案的问题分析 #

你之前的判断逻辑是这样的：

parentRef?.current.getBoundingClientRect().bottom - itemsRef?.current.getBoundingClientRect().height <= itemsRef?.current.getBoundingClientRect().top

这个逻辑完全偏离了“检测是否在父容器底部”的目标——它实际上是在判断蓝色div的顶部是否大于等于父容器底部减去自身高度，这和我们要的“底部对齐”完全不是一回事，自然会在元素高度变化后失效。

正确的检测思路 #

要准确判断蓝色div是否位于父容器底部，我们需要比较蓝色div在父容器内的底部位置和父容器的内部高度：

• blueDiv.offsetTop：蓝色div相对于父容器顶部的距离
• blueDiv.offsetHeight：蓝色div的总高度（包含padding、border）
• parent.clientHeight：父容器的内部高度（容器高度减去border，包含自身padding）

当blueDiv.offsetTop + blueDiv.offsetHeight等于parent.clientHeight时，蓝色div的底部就刚好和父容器的内部底部对齐。考虑到浏览器渲染的像素精度问题，我们可以用绝对值差小于1来做判断，避免因小数像素导致的误判。

修改后的代码实现 #

这里是调整后的核心逻辑，以及完整的代码示例：

App.js 修改后的核心部分

useEffect(() => {
  // 确保DOM元素存在再执行判断
  if (!parentRef.current || !itemsRef.current) return;

  const parent = parentRef.current;
  const blueDiv = itemsRef.current;

  // 计算蓝色div在父容器内的底部位置
  const blueBottomPosition = blueDiv.offsetTop + blueDiv.offsetHeight;
  // 父容器的内部可用高度
  const parentInnerHeight = parent.clientHeight;

  // 考虑像素精度，判断是否对齐
  const isAtBottom = Math.abs(parentInnerHeight - blueBottomPosition) < 1;

  setTitle(isAtBottom);
}, [items]); // 仅在items变化时触发判断，因为元素增删/高度调整都会改变items状态

完整的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 || !itemsRef.current) return;

    const parent = parentRef.current;
    const blueDiv = itemsRef.current;

    const blueBottomPosition = blueDiv.offsetTop + blueDiv.offsetHeight;
    const parentInnerHeight = parent.clientHeight;

    const isAtBottom = Math.abs(parentInnerHeight - blueBottomPosition) < 1;
    setTitle(isAtBottom);
  }, [items]);

  const handleClick = () => {
    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: !itemOld.resized };
      } else {
        return itemOld;
      }
    }));
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Add new</button>
      <button onClick={handleDelete}>Delete last</button>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div ref={parentRef} className="container">
        {items?.map((item) => (
          <div
            onClick={() => handleResize(item)}
            style={{ height: item.resized ? "70px" : "20px" }}
            key={item.id}
            className="container-item"
          >
            <p>{item.name}</p>
          </div>
        ))}
        <div ref={itemsRef} id="title-div">
          {title ? "At the bottom" : "Not at the bottom"}
        </div>
      </div>
    </div>
  );
}

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;
  box-sizing: border-box; /* 全局统一盒模型，避免padding撑宽元素 */
}
.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;
}

我给全局样式加了box-sizing: border-box，这样所有元素的padding和border都不会超出设定的宽高，避免布局意外。

为什么这个方案有效？ #

• 基于父容器和蓝色div的相对位置计算，不受页面滚动的影响
• 考虑了浏览器渲染的像素精度问题，避免因小数像素导致误判
• 仅在items状态变化时触发判断，刚好覆盖了元素增删、高度调整的场景

内容的提问来源于stack exchange，提问作者Samke11