横向滚动上方容器时按像素/百分比切换文本的实现方案咨询

Waypoint确实在处理横向滚动的offset时不太灵活，我建议直接用原生JS监听滚动事件来实现，这样能完全自定义触发条件，不管是按像素还是百分比都没问题。

下面是完整的实现方案，我基于你的代码做了优化调整：

完整代码示例 #

CSS #

#overflow-scroll, #overflow-scroll-offset { 
  overflow: auto; 
  height: 200px; 
  background: none; 
  border: 1px solid #ddd; /* 加边框方便直观看到容器范围 */
}
#image-scroll { 
  width: 1000px; 
  height: 100%; 
  margin-left: 150px; 
  background: pink; 
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hide { display: none; }
p { 
  text-align: center; 
  margin: 1rem 0;
}
.blocks {
  margin-top: 1rem;
}

HTML #

<div id="overflow-scroll" class="mt-3">
  <div id="image-scroll">
    <!-- 可选：添加滚动指示器，方便调试滚动位置 -->
    <p id="scroll-indicator">滚动进度: 0%</p>
  </div>
</div>
<div class="blocks">
  <p class="block1">One text</p>
  <p class="block2 hide">Two text</p>
  <p class="block3 hide">Three text</p>
</div>

JavaScript #

const scrollContainer = document.getElementById('overflow-scroll');
const textBlocks = document.querySelectorAll('.blocks p');
const scrollIndicator = document.getElementById('scroll-indicator');

// 自定义触发规则：百分比阈值对应要显示的文本
const triggerRules = [
  { triggerPercent: 0, targetSelector: '.block1' },
  { triggerPercent: 20, targetSelector: '.block2' },
  { triggerPercent: 60, targetSelector: '.block3' }
];

function handleScroll() {
  // 计算容器总可横向滚动的宽度
  const totalScrollableWidth = scrollContainer.scrollWidth - scrollContainer.clientWidth;
  if (totalScrollableWidth <= 0) return; // 没有可滚动空间时直接返回

  // 计算当前滚动的百分比（四舍五入取整）
  const currentScrollPercent = Math.round((scrollContainer.scrollLeft / totalScrollableWidth) * 100);
  
  // 更新滚动指示器（可选，方便调试）
  scrollIndicator.textContent = `滚动进度: ${currentScrollPercent}%`;

  // 从后往前匹配阈值，确保找到当前滚动位置对应的第一个有效规则
  for (let i = triggerRules.length - 1; i >= 0; i--) {
    const rule = triggerRules[i];
    if (currentScrollPercent >= rule.triggerPercent) {
      // 隐藏所有文本块
      textBlocks.forEach(block => block.classList.add('hide'));
      // 显示当前规则对应的文本块
      document.querySelector(rule.targetSelector).classList.remove('hide');
      break;
    }
  }
}

// 页面加载时先执行一次，确保初始状态正确
handleScroll();

// 监听容器的滚动事件
scrollContainer.addEventListener('scroll', handleScroll);

// 【可选性能优化】如果滚动内容复杂，可添加节流函数减少触发频率
// function throttle(func, delay) {
//   let lastTriggerTime = 0;
//   return function(...args) {
//     const now = Date.now();
//     if (now - lastTriggerTime >= delay) {
//       lastTriggerTime = now;
//       func(...args);
//     }
//   }
// }
// scrollContainer.addEventListener('scroll', throttle(handleScroll, 50));

关键逻辑说明 #

1. 滚动百分比计算：用scrollLeft（已滚动的像素值）除以scrollWidth - clientWidth（容器总可滚动像素宽度），再转成百分比，能精准反映横向滚动的相对位置。
2. 阈值匹配逻辑：从后往前遍历规则数组，确保每个滚动区间都能匹配到对应的文本块，避免规则覆盖问题。
3. 灵活调整规则：你可以随时修改triggerRules里的百分比阈值，或者把百分比改成固定像素值（直接对比scrollLeft和设定像素即可），完全适配你的需求。

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