鼠标滚动触发的分层视差页面图层与body背景对齐出现间隙如何解决

架构老林

2026-9-30

问题原因&修复方案

首先修正全局样式的两处基础错误：
1. 你当前的全局重置规则没有加*选择器，导致margin、padding清零的规则完全不生效，浏览器自带的body默认外边距（通常为8px）就是左侧间隙的直接来源
2. 规则里的box-sixing是拼写错误，正确属性名为box-sizing，错误拼写导致盒模型计算规则不生效
修正后的全局样式代码如下：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

其次优化section和body的样式避免冗余问题：
1. 给body额外加边距清零兜底，避免全局规则覆盖不全
2. section的宽度替换为100vw，溢出规则换成overflow: clip，比overflow: hidden更彻底地裁剪超出边界的内容，避免视差位移时透出背景
优化后的代码片段如下：

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(#2b1055,#7597de);
}

section {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 100px;
    overflow: clip;
    display: flex;
    justify-content: center;
    align-items: center;
}