滚动时固定覆盖层列边框 类d-esk.net页面效果实现咨询

核心思路 #

用两层结构实现：固定在视口最上层的边框层 + 正常文档流的滚动内容层，边框层不拦截交互事件，内容层内边距和边框宽度对齐，保证所有内容都在边框限定的范围内展示。

具体实现代码 #

HTML 结构 #

<!-- 固定在视口的边框层 -->
<div class="viewport-frame"></div>
<!-- 所有站点内容都放在这个容器里 -->
<main class="page-content">
  <section>示例内容1</section>
  <section>示例内容2</section>
  <section>示例内容3，内容足够长即可触发滚动</section>
</main>

CSS 样式 #

/* 先清除浏览器默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 边框层样式 */
.viewport-frame {
  /* 固定定位，永远贴在视口边缘 */
  position: fixed;
  /* 上下左右四个方向都贴满视口 */
  inset: 0;
  /* 边框宽度和颜色可自定义 */
  border: 24px solid #000;
  /* 层级调到最高，保证压在内容上面 */
  z-index: 999;
  /* 关键属性：让边框层不响应任何鼠标/触摸事件，不影响下层内容的交互 */
  pointer-events: none;
}
/* 内容层样式 */
.page-content {
  /* 左右内边距和边框层的边框宽度一致，避免内容被边框挡住 */
  padding: 24px;
  /* 内容高度超过视口就会触发滚动，内容会从边框下方穿过 */
  min-height: 200vh;
}

常见问题说明 #

你之前尝试调整[grid-col] { border: 1px solid black; }、[grid-row] { border: 1px solid black; }没有生效，原因是网格元素的边框是跟随内容整体滚动的，无法固定在视口位置，所以达不到固定窗口的效果。

相关学习方向 #

• 重点掌握CSS position属性的五个取值（static/relative/absolute/fixed/sticky）的适用场景，尤其是fixed固定定位的特性
• 了解CSS pointer-events属性的作用，固定遮罩、悬浮装饰类元素都常用到这个属性
• 熟悉CSS盒模型规则，理解border、padding对元素可视范围和内部内容位置的影响

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