如何从可滚动div/模态框中获取元素的顶部与底部高度

我有一个带有“test”文本的非绝对定位元素，它位于可滚动div中，需要计算该元素位置对应的顶部高度和底部高度。相关示例代码如下：

HTML代码 #

<div id="myDIV">
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras velit augue, efficitur non tempus vitae, vulputate a sem. Curabitur mattis, justo sed vestibulum dictum, lorem sapien pulvinar nulla, at faucibus enim dui vel ligula. Phasellus vel leo non est varius pellentesque. Vestibulum ac pharetra magna, in posuere velit. Donec vel eros et metus facilisis consequat. Praesent augue tortor, pellentesque eget luctus at, ornare ut ligula. In nec massa ipsum. Fusce vitae leo commodo, tempus tellus eget, vestibulum diam. Etiam quis risus in odio pulvinar semper non vitae diam. Curabitur vestibulum mauris vitae tortor interdum, a iaculis est vestibulum. Aenean sed eleifend metus. Donec lorem dui, porta quis enim et, maximus auctor ex. Nullam a elementum diam. Suspendisse suscipit lorem vitae gravida porttitor.
    <div class="test">Test</div>
Donec dictum lectus id turpis pharetra dictum. Cras pellentesque ornare ex, eget interdum lorem vulputate id. In hac habitasse platea dictumst. Nullam pellentesque nulla vitae massa porttitor, nec fermentum mi tempor. Phasellus ac purus eros. Maecenas ac nisi accumsan, pharetra nisl at, sollicitudin enim. Cras convallis in mauris ac ultrices. Maecenas porta condimentum tellus, cursus lobortis urna varius non. Curabitur at massa vitae ligula fermentum congue at sed ipsum. Aliquam porta, magna vel ullamcorper sagittis, leo ante gravida augue, in aliquam lectus enim vitae velit. Nunc mattis consectetur eros at tristique. Donec ligula tortor, vehicula nec sapien quis, iaculis pharetra lacus.
In auctor est tortor, ullamcorper suscipit sem hendrerit nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris id dignissim justo. Duis finibus nisi risus, consequat lacinia elit eleifend sit amet. Proin accumsan, odio vel pharetra tempus, quam nisl condimentum lectus, a posuere magna orci ac nunc. Integer semper ante at lacus commodo placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>
</div>

<button onclick="calcHeight()">Get Height of test element</button>

CSS代码 #

#myDIV {
  margin-top: 10px;
  max-height: 250px;
  width: 250px;
  overflow: auto;
}
#content {
  padding: 10px;
  background-color: coral;
}
.test {
    height: 50px;
    background-color: greenyellow;
}

初始JS代码 #

function calcHeight() {
  let myDiv = document.getElementById("myDIV");
  console.log('myDiv','scroll height = ',myDiv.scrollHeight, 'client height = ',myDiv.clientHeight, 'scroll top = ', myDiv.scrollTop, 'offset top = ',myDiv.offsetTop, 'offset height = ',myDiv.offsetHeight);
}

解决方案 #

要计算可滚动容器内目标元素的顶部和底部高度，核心是利用getBoundingClientRect()获取元素与容器的视口位置，结合容器的滚动偏移量转换为容器内的绝对位置：

修改后的计算函数 #

function calcHeight() {
  const scrollContainer = document.getElementById("myDIV");
  const targetElement = document.querySelector(".test");
  
  // 获取容器和元素的视口位置信息
  const containerRect = scrollContainer.getBoundingClientRect();
  const elementRect = targetElement.getBoundingClientRect();
  
  // 1. 元素顶部距离滚动容器顶部的绝对高度
  const topToContainerTop = elementRect.top - containerRect.top + scrollContainer.scrollTop;
  // 2. 元素底部距离滚动容器顶部的绝对高度
  const bottomToContainerTop = elementRect.bottom - containerRect.top + scrollContainer.scrollTop;
  
  // 可选：元素与容器可视区域的相对距离
  const topToVisibleTop = elementRect.top - containerRect.top; // 元素顶部到容器可视区顶部的距离
  const bottomToVisibleBottom = containerRect.bottom - elementRect.bottom; // 元素底部到容器可视区底部的距离
  
  console.log('元素顶部距容器顶部：', topToContainerTop);
  console.log('元素底部距容器顶部：', bottomToContainerTop);
  console.log('元素顶部距容器可视区顶部：', topToVisibleTop);
  console.log('元素底部距容器可视区底部：', bottomToVisibleBottom);
}

关键逻辑说明 #

• getBoundingClientRect()：返回元素相对于浏览器视口的位置数据（top、bottom为元素上下边缘到视口顶部的距离）。
• scrollTop：滚动容器已向上滚动的像素值，用于将视口相对位置转换为容器内的绝对位置（抵消滚动带来的偏移）。
• 若需要的是元素与容器可视区域的相对高度，直接用元素视口位置减去容器视口位置即可，无需加上scrollTop。

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