页面分屏布局窗口Resize显示异常的修复方案咨询

嘿，这个问题我之前做类似分屏布局的时候也踩过坑！核心原因是窗口resize后，页面的视口高度变了，但之前的滚动位置和区块高度没有及时同步，导致当前区块的显示范围错位，就会出现上方内容漏出来的情况。给你几个具体的修复思路，亲测有效：

1. 监听resize事件，强制滚动到当前区块顶部 #

首先你需要跟踪当前激活的区块索引（比如通过导航按钮的选中状态来维护一个变量，比如currentSectionIndex），然后在窗口大小变化时，直接让当前区块滚动到视口顶部。这里用scrollIntoView比手动计算scrollTo的位置更可靠，它会自动适配元素和视口的相对位置：

// 假设你已经维护了currentSectionIndex变量
window.addEventListener('resize', () => {
  const currentSection = document.querySelectorAll('.split-section')[currentSectionIndex];
  // 用instant避免滚动动画，保证瞬间定位正确
  currentSection.scrollIntoView({ behavior: 'instant', block: 'start' });
});

2. 同步更新区块高度，避免vh计算延迟 #

原示例可能用了height: 100vh来设置分屏高度，但部分浏览器在resize时vh的计算会有延迟，导致区块高度和新视口不匹配。可以在resize时手动强制设置区块高度：

window.addEventListener('resize', () => {
  const viewportHeight = window.innerHeight;
  // 遍历所有分屏区块，强制设置高度为当前视口高度
  document.querySelectorAll('.split-section').forEach(section => {
    section.style.height = `${viewportHeight}px`;
  });
  // 再滚动到当前区块顶部
  const currentSection = document.querySelectorAll('.split-section')[currentSectionIndex];
  currentSection.scrollIntoView({ behavior: 'instant', block: 'start' });
});

3. 防抖优化，避免频繁触发计算 #

resize事件会连续触发很多次，直接执行上面的代码可能导致性能问题，加个防抖函数让逻辑在窗口调整稳定后再执行：

// 简单的防抖函数
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 把resize处理逻辑包裹成防抖版本
const handleResize = debounce(() => {
  const viewportHeight = window.innerHeight;
  document.querySelectorAll('.split-section').forEach(section => {
    section.style.height = `${viewportHeight}px`;
  });
  const currentSection = document.querySelectorAll('.split-section')[currentSectionIndex];
  currentSection.scrollIntoView({ behavior: 'instant', block: 'start' });
});

window.addEventListener('resize', handleResize);

4. 抽离滚动逻辑，和导航切换复用 #

把滚动到指定区块的逻辑抽成单独函数，这样导航切换和resize时都能复用，保证逻辑一致性：

// 抽离滚动函数
function scrollToSection(index) {
  const section = document.querySelectorAll('.split-section')[index];
  section.scrollIntoView({ behavior: 'smooth', block: 'start' });
  currentSectionIndex = index;
}

// 导航按钮点击事件调用
document.querySelectorAll('.nav-btn').forEach((btn, index) => {
  btn.addEventListener('click', () => scrollToSection(index));
});

// resize时复用这个函数
window.addEventListener('resize', debounce(() => {
  const viewportHeight = window.innerHeight;
  document.querySelectorAll('.split-section').forEach(section => {
    section.style.height = `${viewportHeight}px`;
  });
  scrollToSection(currentSectionIndex);
}, 100));

这样调整后，无论窗口怎么resize，当前激活的区块都会完整显示在视口中，不会再出现上方内容漏出的问题。

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