如何实现滚动至当前Div半高时跳转至下一个自适应高度Div

嘿，我完全懂你的烦恼——那些热门的全屏滚动插件（比如fullpage.js、onepage.js）大多默认要求每个区块等高，碰到你这种高度不一的Div直接就“罢工”了对吧？别慌，咱们可以自己写一段轻量的JS逻辑来搞定这个需求，完美适配不同高度的区块，下面是具体方案：

第一步：给Div统一加类名 #

先给你的5个Div都加上一个统一的类名，比如.section，这样后续JS选择元素会更方便，修改后的HTML大概是这样：

<div id="first" class="section">第一个区块内容</div>
<div id="second" class="section">第二个区块内容</div>
<div id="third" class="section">第三个区块内容</div>
<div id="fourth" class="section">第四个区块内容</div>
<div id="fifth" class="section">第五个区块内容</div>

你的原有CSS完全不用改，只是多了个类选择器而已，不影响原有样式。

第二步：编写核心JS逻辑 #

这段代码会监听滚动事件，判断当前视口中的Div，当滚动到该Div的一半高度时，自动平滑跳转到下一个Div：

// 防抖函数：避免滚动事件过于频繁触发，优化性能
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

document.addEventListener('DOMContentLoaded', function() {
  const sections = document.querySelectorAll('.section');
  let currentSectionIndex = 0;
  let isScrolling = false; // 标记是否正在执行平滑滚动，防止重复触发

  // 找到当前处于视口中的区块
  function getCurrentSection() {
    let index = 0;
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    sections.forEach((section, idx) => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.offsetHeight;
      // 判断当前滚动位置是否落在这个区块范围内
      if (scrollTop >= sectionTop && scrollTop < sectionTop + sectionHeight) {
        index = idx;
      }
    });
    return index;
  }

  // 平滑滚动到指定区块
  function scrollToSection(index) {
    if (index < 0 || index >= sections.length) return; // 边界判断，防止越界
    isScrolling = true;
    sections[index].scrollIntoView({
      behavior: 'smooth', // 平滑滚动效果
      block: 'start' // 滚动到区块顶部
    });
    // 滚动完成后重置标记（这里用定时器模拟，因为scrollIntoView没有官方完成事件）
    setTimeout(() => {
      isScrolling = false;
    }, 1000); // 可以根据实际滚动速度调整这个时间
  }

  // 滚动事件处理函数
  function handleScroll() {
    if (isScrolling) return; // 如果正在滚动，直接跳过，避免连续触发

    currentSectionIndex = getCurrentSection();
    const currentSection = sections[currentSectionIndex];
    const sectionTop = currentSection.offsetTop;
    const sectionHalfHeight = currentSection.offsetHeight / 2;
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // 当滚动距离超过当前区块顶部+一半高度时，跳转到下一个区块
    if (scrollTop >= sectionTop + sectionHalfHeight) {
      scrollToSection(currentSectionIndex + 1);
    }

    // 如果你需要支持上滚跳转到上一个区块，可以加上下面这段
    // if (scrollTop < sectionTop + sectionHalfHeight && currentSectionIndex > 0) {
    //   scrollToSection(currentSectionIndex - 1);
    // }
  }

  // 给滚动事件绑定防抖后的处理函数，100是防抖等待时间（毫秒）
  window.addEventListener('scroll', debounce(handleScroll, 100));
});

关键逻辑说明 #

• 防抖函数：控制滚动事件的处理频率，避免浏览器因为频繁执行JS而卡顿
• isScrolling标记：防止在平滑滚动的过程中重复触发跳转，避免出现连续滚动的混乱情况
• 区块判断：通过滚动位置和每个Div的offsetTop、offsetHeight，精准定位当前显示的区块
• 触发条件：只有当滚动到当前Div的一半高度时，才会触发下一个区块的滚动，完全符合你的需求

可选扩展 #

如果需要支持向上滚动时跳转到上一个区块，只需要把代码中注释掉的那段逻辑解开即可。

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