滚动距离追踪器粘性元素过渡问题修复咨询

需求说明 #

用户向下滚动网页时，需实现以下功能：

• 当滚动到.test容器时，将其设为粘性定位；
• 当.test内部滚动至80%-100%区间时，切换为非粘性定位；
• 当.test处于顶部粘性定位状态时，仅自身可滚动，禁用body滚动；滚动至80%-100%时恢复body滚动。

现有代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
  <title>Scroll Distance Tracker</title>
  <style>
  </style>
</head>
<body>
  <div class="test">
    <div class="content">hello</div>
  </div>
  <div class="line"></div>

  <script>
  </script>
</body>
</html>

CSS #

body {
  height: 2000px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.test {
  height: 500px;
  margin-top: 800px;
  border: 3px solid red;
  width: 100%;
  overflow-y: auto;
  background: white;
  position: relative;
}

.content {
  position: absolute;
  top: 900px;
}

.scroll-stop-test {
  overflow: hidden;
}

.scroll-stop-body {
  overflow: hidden;
}

.line {
  border: 1px solid red;
  margin-top: 30px;
  height: 2px;
}

JavaScript #

document.addEventListener("DOMContentLoaded", () => {
  const testElement = document.querySelector(".test");
  const body = document.body;

  function checkStickyPosition() {
    const rect = testElement.getBoundingClientRect();
    if (rect.top === 0) {
      testElement.classList.remove("scroll-stop-test");
      body.classList.add("scroll-stop-body");
    } else {
      testElement.classList.add("scroll-stop-test");
      body.classList.remove("scroll-stop-body");
    }
  }

  testElement.addEventListener("scroll", () => {
    const scrollTop = testElement.scrollTop;
    const scrollHeight = testElement.scrollHeight;
    const clientHeight = testElement.clientHeight;

    const scrollPercentage =
      (scrollTop / (scrollHeight - clientHeight)) * 100;

    if (scrollPercentage >= 80 && scrollPercentage <= 100) {
      testElement.style.position = "relative";
      testElement.style.top = "0px";
      body.classList.remove("scroll-stop-body");

      console.log("Scroll inside test element completed");
    }
  });

  window.addEventListener("scroll", checkStickyPosition);

  window.addEventListener("scroll", () => {
    checkStickyPosition();

    const rect = testElement.getBoundingClientRect();
    if (rect.top > 0) {
      testElement.style.position = "sticky";
      testElement.style.top = "0px";
      testElement.scrollTop = 0;
      body.style.position = "";
    }
  });

  checkStickyPosition();
});

遇到的问题 #

1. 使用rect.top > 0作为切换粘性定位的条件时，.test变为粘性后，页面其他内容（如.line元素）的位置会随滚动速度变化，快速滚动时会被.test覆盖；
2. .test从粘性定位切换为相对定位时，会向上偏移几个像素。

修复方案及代码 #

关键修复点 #

1. 精准触发粘性定位：将判断条件改为rect.top <= 0，确保元素刚接触视口顶部就切换为粘性，避免快速滚动时的布局覆盖；用状态变量避免重复修改样式，减少重绘。
2. 解决定位切换偏移：切换为相对定位前，记录元素当前的视口位置，设置top值匹配该位置，保持布局连贯。
3. 优化滚动禁用体验：提前计算滚动条宽度，禁用body滚动时用padding-right补偿，避免页面宽度跳动。
4. 合并事件监听：减少重复的window滚动事件处理，提升性能。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Scroll Distance Tracker</title>
  <style>
    body {
      height: 2000px;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      overflow-y: scroll; /* 始终显示滚动条，避免禁用时布局跳动 */
    }

    .test {
      height: 500px;
      margin-top: 800px;
      border: 3px solid red;
      width: 100%;
      overflow-y: auto;
      background: white;
      position: relative;
    }

    /* 用类管理粘性状态，避免直接修改style */
    .test.sticky {
      position: sticky;
      top: 0;
    }

    .content {
      position: absolute;
      top: 900px;
    }

    .scroll-stop-test {
      overflow: hidden;
    }

    .scroll-stop-body {
      overflow: hidden;
      /* 补偿滚动条宽度，避免布局偏移 */
      padding-right: var(--scrollbar-width, 0px);
    }

    .line {
      border: 1px solid red;
      margin-top: 30px;
      height: 2px;
    }
  </style>
</head>
<body>
  <div class="test">
    <div class="content">hello</div>
  </div>
  <div class="line"></div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const testElement = document.querySelector(".test");
      const body = document.body;
      
      // 计算滚动条宽度，用于布局补偿
      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
      document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);

      let isStickyActive = false;

      // 检查是否需要切换粘性状态
      function checkStickyState() {
        const rect = testElement.getBoundingClientRect();
        const shouldStick = rect.top <= 0;

        if (shouldStick && !isStickyActive) {
          testElement.classList.add('sticky');
          isStickyActive = true;
          body.classList.add('scroll-stop-body');
          testElement.classList.remove('scroll-stop-test');
        } else if (!shouldStick && isStickyActive) {
          testElement.classList.remove('sticky');
          isStickyActive = false;
          body.classList.remove('scroll-stop-body');
          testElement.classList.add('scroll-stop-test');
          testElement.scrollTop = 0;
        }
      }

      // 监听.test内部滚动，处理非粘性切换
      testElement.addEventListener("scroll", () => {
        if (!isStickyActive) return;

        const scrollTop = testElement.scrollTop;
        const scrollHeight = testElement.scrollHeight;
        const clientHeight = testElement.clientHeight;
        const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;

        if (scrollPercentage >= 80 && scrollPercentage <= 100) {
          // 记录当前位置，避免切换定位时偏移
          const rect = testElement.getBoundingClientRect();
          testElement.classList.remove('sticky');
          testElement.style.top = `${rect.top}px`;
          isStickyActive = false;
          body.classList.remove('scroll-stop-body');
          testElement.classList.remove('scroll-stop-test');
          
          console.log("Scroll inside test element completed");
        }
      });

      // 合并window滚动事件
      window.addEventListener("scroll", checkStickyState);

      // 初始状态检查
      checkStickyState();
    });
  </script>
</body>
</html>

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