在前端开发中，我们经常需要实现一个可滚动的 div，当外部容器大小改变时，内部 div 应该保持在底部位置。本文将介绍如何用 CSS 和 JavaScript 实现这个功能。
前置知识
在阅读本文之前，你需要掌握以下知识点：
- HTML、CSS、JavaScript 基础语法
- DOM 操作基础知识
实现思路
要实现这个功能，我们可以使用 CSS 的 position: absolute 属性和 JavaScript 的 DOM 操作。
具体来说，我们可以将内部 div 的 position 设为 absolute，并将其 bottom 属性设为 0，这样它就会贴着外部容器的底部显示。然后，我们可以监听外部容器大小的变化事件，在事件处理函数中更新内部 div 的位置。
下面是示例代码：
HTML
<div id="outer">
<div id="inner">
<!-- 可滚动内容 -->
</div>
</div>CSS
-- -------------------- ---- ------- ------ - --------- --------- ------- ------ -- ------- -- --------- ----- - ------ - --------- --------- ------- -- -
JavaScript
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
// 监听外部容器大小变化事件
new ResizeObserver(() => {
// 更新内部 div 的位置
inner.style.bottom = `-${outer.scrollHeight - outer.clientHeight}px`;
}).observe(outer);实现说明
在上面的代码中，我们首先通过 document.querySelector 方法获取了外部容器和内部 div 的 DOM 对象。然后，我们使用 ResizeObserver 类来监听外部容器大小的变化事件，当事件触发时，我们可以通过 scrollHeight 和 clientHeight 属性计算出外部容器的滚动高度，从而更新内部 div 的位置。
需要注意的是，在实际开发中可能会遇到一些兼容性问题。比如，ResizeObserver 在某些浏览器上可能不支持，此时我们可以使用 window.onresize 或者 MutationObserver 来代替。
总结
本文介绍了如何用 CSS 和 JavaScript 实现一个可滚动的 div，当外部容器大小改变时，内部 div 保持在底部位置的功能。同时，本文也提供了示例代码和实现说明，希望能对你学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31418