如何防止出现滚动条时背景图像偏移或收缩？

问题根源 #

当页面出现垂直滚动条时，浏览器会自动缩减内容区域的可用宽度，而你当前把背景样式设置在body元素上，结合background-attachment: fixed和background-size: cover属性，会导致背景在滚动条出现时发生偏移——因为fixed定位的背景基于视口，但body内容区域宽度变化后，背景的相对显示位置会被干扰。

解决方案 #

方案1：强制始终显示垂直滚动条 #

给html元素设置overflow-y: scroll，让两个页面始终保留滚动条的宽度，避免切换页面时视口宽度波动：

html {
    min-height: 100%;
    cursor: url('Pictures/glove-lg.png'), auto;
    overflow-y: scroll; /* 强制显示垂直滚动条，维持视口宽度一致 */
}

body {
    display: flex;
    justify-content: center;
    font-family: 'Lora', serif;
    margin: .8em;
    background-color: #151b20;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(Pictures/backgroundDala.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

方案2：将背景移至根元素html #

把背景样式从body转移到html（根元素），让背景直接绑定到视口，不受body内容区域变化影响：

html {
    min-height: 100%;
    cursor: url('Pictures/glove-lg.png'), auto;
    /* 迁移背景样式到html */
    background-color: #151b20;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(Pictures/backgroundDala.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

body {
    display: flex;
    justify-content: center;
    font-family: 'Lora', serif;
    margin: .8em;
    background-color: transparent; /* 让html的背景透显 */
    overflow-x: hidden; /* 避免横向溢出 */
}

说明 #

两种方案都能确保背景在页面切换时完全静态：

• 方案1适合不想调整背景结构的场景，仅通过强制保留滚动条宽度解决问题；
• 方案2更彻底，从根源上让背景与视口绑定，消除偏移隐患。

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