getBoundingClientRect()返回image-slider元素bottom值异常问题

代码重现 #

CSS代码 #

* {
    box-sizing: border-box;
    border: 0;
    margin: 0;
}

.image-slider {
    padding: 34px;
    width: 550px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-y: hidden;
}

.image-slider .images {
    display: block;
    margin: 14px 24px;
    border-radius: 15px;
}

HTML代码 #

<body>
    <div class="main-container">
        <div class="image-slider">
            <img src="https://picsum.photos/400/300" alt="Img1" class="images">
            <img src="https://picsum.photos/400/300" alt="Img2" class="images">
            <img src="https://picsum.photos/400/300" alt="Img3" class="images">
            <img src="https://picsum.photos/400/300" alt="Img4" class="images">
            <img src="https://picsum.photos/400/300" alt="Img5" class="images">
        </div>
    </div>
</body>

问题描述 #

调用.image-slider元素的getBoundingClientRect()后，返回结果如下：

{ 
    x: 0,
    y: 0,
    width: 550,
    height: 96,
    top: 0,
    right: 550,
    bottom: 96,
    left: 0
}

其中height和bottom值为96，但该div实际要容纳高度300px的图片，视觉上应该有400px左右的高度，这是为什么？

更新1：鼠标检测异常 #

我正在实现图片查看器，需要鼠标悬停在div左右区域时显示箭头，JS代码如下：

const imageSlider = document.querySelector(".image-slider");
const coords = imageSlider.getBoundingClientRect();

imageSlider.addEventListener('mousemove', function(event) {
    if (!event) return;

    if (isMouseInsideTheImageSlider(event)) {
        console.log("Inside");
    }
})

function isMouseInsideTheImageSlider(event) {
    return event.clientX <= coords.right && event.clientX >= coords.left
        && event.clientY <= coords.bottom && event.clientY >= coords.top;
}

由于上述高度问题，只有鼠标在div顶部区域悬停时才会打印"Inside"。

原因与解决方案 #

核心原因 #

1. overflow-y: hidden 的裁剪作用：.image-slider设置了overflow-y: hidden，内部图片高度（300px）加上margin后远超容器当前的自适应高度，超出部分被裁剪。而getBoundingClientRect()返回的是元素在页面上实际可见的区域尺寸，不是包含被裁剪内容的完整高度。
2. 静态坐标的过时问题：coords变量在页面加载时就固定了，没有实时更新，即使后续元素尺寸变化，检测逻辑还是用旧的坐标值。

解决方案 #

1. 获取完整元素高度（若需要）

如果要获取包含被裁剪内容的完整高度，不要用getBoundingClientRect()，改用scrollHeight：

const fullHeight = imageSlider.scrollHeight; // 返回包含溢出内容的总高度

或者调整容器CSS，让它能容纳图片，避免裁剪：

.image-slider {
    padding: 34px;
    width: 550px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 移除overflow-y: hidden，或者设置足够容纳图片的最小高度 */
    min-height: 328px; /* 300px图片高度 + 14px上下margin */
}

2. 修复鼠标检测逻辑

每次鼠标移动时重新获取元素的最新位置坐标，确保检测逻辑用的是实时值：

const imageSlider = document.querySelector(".image-slider");

imageSlider.addEventListener('mousemove', function(event) {
    if (!event) return;

    if (isMouseInsideTheImageSlider(event)) {
        console.log("Inside");
    }
})

function isMouseInsideTheImageSlider(event) {
    const coords = imageSlider.getBoundingClientRect(); // 每次检测时重新获取最新坐标
    return event.clientX <= coords.right && event.clientX >= coords.left
        && event.clientY <= coords.bottom && event.clientY >= coords.top;
}

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