不设置body的overflow:hidden且保留页面滚动，实现大元素CSS背景动画

核心思路 #

将背景动画容器与页面内容容器分层隔离，通过定位和溢出控制，让背景容器的溢出仅在自身范围内隐藏，同时保证页面内容可正常滚动：

• 把背景容器设置为position: fixed，使其脱离文档流，不会干扰页面内容的布局与滚动
• 给背景容器设置width: 100vw、height: 100vh和overflow: hidden，限制内部大尺寸元素的溢出不会扩散到页面
• 给页面内容容器设置更高的z-index，确保内容显示在背景动画上方

修改后的代码 #

SCSS #

body{
  background: grey;
  margin: 0; /* 移除默认边距避免滚动条异常 */
}

.circles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0; /* 确保背景在内容下方 */

    &.closing {
        .bigCircle {
            animation: bigCircleIn 1s 0s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(.86, 0, .07, 1);
        }

        .smallCircle {
            animation: smallCircleIn 1s 0s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(.86, 0, .07, 1);
        }
    }

    &.opened {
        .bigCircle {
            animation: bigCircleOut 1s 0s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(.86, 0, .07, 1);
        }

        .smallCircle {
            animation: smallCircleOut 1s 0s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(.86, 0, .07, 1);
        }
    }

    .bigCircle,
    .smallCircle {
        position: absolute;
        color: white;
    }

    .bigCircle {
        width: 2947px;
        height: 2947px;
        border-radius: 2947px;
        text-align: center;
        background: linear-gradient(204deg, #FFF 15.48%, rgba(255, 255, 255, 0.00) 62.97%);
        opacity: 0.12;
    }

    .smallCircle {
        width: 1173px;
        height: 1173px;
        border-radius: 1173px;
        opacity: 0.06;
        background: linear-gradient(204deg, #FFF 15.48%, rgba(255, 255, 255, 0.00) 50.01%);
    }
}

@keyframes bigCircleOut {
  0% {
        left: -28%;
        top: -70px;
    }

    100% {
        left: 100%;
        top: -70px;
    }
}

@keyframes bigCircleIn {
  0% {
        left: 100%;
        top: -70px;
    }

    100% {
        left: -28%;
        top: -70px;
    }
}

@keyframes smallCircleOut {
  0% {
        left: -50%;
        top: 50%;
    }

    100% {
        left: -82%;
        top: 50%;
    }
}

@keyframes smallCircleIn {
  0% {
        left: -82%;
        top: 50%;
    }

    100% {
        left: -50%;
        top: 50%;
    }
}

JS #

$('.circles').toggleClass('opened closing');

HTML #

<div class="circles opened">
  <div class="bigCircle"></div>
  <div class="smallCircle"></div>
</div>

<div class="container" style="position: relative; z-index: 1;">
  <div class="row">
    <div class="col-xs-12">
      <h1>Header element</h1>
      <p>Some paragrah element</p>
      <!-- 添加更多内容测试滚动效果 -->
      <p>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br></p>
    </div>
  </div>
</div>

效果说明 #

• position: fixed让背景容器固定在视口，不会随页面滚动移动，同时脱离文档流，其溢出不会影响body的滚动行为
• overflow: hidden仅作用于背景容器内部，隐藏大尺寸圆形元素超出容器的部分，不会限制页面内容的滚动
• 通过z-index分层，确保页面内容始终显示在背景动画上方，不会被遮挡

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