在前端开发中，我们经常会遇到需要固定某个元素，而让其他元素可以滚动的情况。今天，我将为大家介绍如何实现让一个桌子的身体滚动，但让它的头固定在适当的位置。
实现思路
要实现这个效果，我们需要使用 CSS 属性 position 和 overflow，以及 JavaScript。具体步骤如下：
- 建立一个包含两个 div 的父 div，其中一个 div 是桌子的头部，一个是桌子的身体。
- 将头部 div 固定在顶部，使其
position: fixed。 - 将身体 div 设置为可滚动，使用
overflow: auto。 - 通过 JavaScript 计算头部 div 的高度，设置身体 div 的
padding-top，确保身体 div 滚动时不会覆盖住头部 div。
代码示例
HTML 代码：
-- -------------------- ---- -------
---- -----------------------
---- -------------------------------
---- ------------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------
------CSS 代码：
-- -------------------- ---- ------- --------------- - ------- ------ --------- ------- - ------------ - --------- ------ ---- -- ----- -- ------ -- ------- ----- ----------------- -------- - ---------- - ------------ ----- ------- ----- --------- ----- -
JavaScript 代码：
const deskHeaderHeight = document.querySelector('.desk-header').offsetHeight;
document.querySelector('.desk-body').style.paddingTop = `${deskHeaderHeight}px`;总结
通过以上实现，我们可以让一个桌子的身体滚动，但让它的头固定在适当的位置。这种方式可以应用于各种需要固定某个元素的场景，提高页面的用户体验和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9763
