如何移除parallax scrolling视差滚动效果顶部出现的白色条带

架构老林

2026-10-10

问题原因

这个白边是**外边距塌陷（margin collapse）**导致的：你页面里的<h1>标签默认自带上外边距，而它的父级（浅灰色背景的内容容器）没有设置上内边距或上边框，导致h1的上外边距直接穿透父容器向外溢出，把父容器往下顶开，中间露出了body的白色背景，就形成了你看到的白边。不需要额外新建div，只要修改少量CSS参数就能解决。

解决方案

你可以任选下面一种方法修复：

给包裹文本的浅灰色容器添加上内边距/透明上边框，阻断外边距穿透，修改行内样式即可：
```
<div style="height:700px;background-color:lightgrey;font-size:36px;padding-top: 1px;">
```
直接重置h1的默认上外边距：
```
h1 {
  margin-top: 0;
}
```
额外注意：你当前的代码存在语法错误，高度为700px的浅灰色div没有写闭合标签</div>，建议补上，避免部分浏览器出现异常布局。