如何实现页面滚动时初始100%宽度的div逐渐缩小的效果

问题根源 #

你现有代码的宽度计算逻辑为「滚动距离越大，宽度取值越大」，和你需要的「初始满宽、滚动缩小」的需求逻辑完全反向，同时缺少初始宽度设置，导致页面加载时状态不符合预期。

修正后完整代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Scroll Shrink Div Demo</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #animatedDiv {
        background: #dc143c;
        min-height: 9000px;
        width: 100%;
        min-width: 20%;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="animatedDiv"></div>
    <script>
      const aDiv = document.getElementById("animatedDiv");
      // 缩小速度系数，值越大缩小速度越慢
      const SHRINK_RATE = 4;
      // 最小宽度阈值，单位%
      const MIN_WIDTH = 20;

      function updateDivWidth() {
        const scrollTop = window.pageYOffset;
        const shrinkOffset = scrollTop / SHRINK_RATE;
        // 宽度值限制在20%~100%区间，滚动距离越大宽度越小
        const targetWidth = Math.min(Math.max(100 - shrinkOffset, MIN_WIDTH), 100);
        aDiv.style.width = `${targetWidth}%`;
      }

      window.addEventListener("scroll", () => {
        requestAnimationFrame(updateDivWidth);
      }, false);

      // 初始化执行一次，适配刷新后页面不在顶部的场景
      updateDivWidth();
    </script>
  </body>
</html>

关键修改点 #

• 初始样式给目标div设置width: 100%，保证页面加载时默认是满宽状态
• 反转宽度计算逻辑：用100%减去滚动距离换算的偏移值，实现滚动距离越大、宽度越小的效果
• 保留宽度区间限制：确保宽度始终在20%~100%之间，不会出现超出范围的异常值
• 新增初始化执行逻辑：如果用户刷新页面时停留在非顶部位置，也能正确显示对应宽度
• 增加默认边距重置和div定位修正，避免默认浏览器边距导致的横向滚动条问题
• 你可以自行修改SHRINK_RATE调整缩小速度，修改MIN_WIDTH调整最小宽度阈值

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