列表初始显示位置与焦点滚动异常问题技术咨询

我来帮你逐个解决这两个问题，咱们一步步拆解：

问题1：列表初始位置偏移，同时需兼顾少项时的垂直居中 #

问题原因 #

你提到的align-items:center确实是核心矛盾：当列表内容高度超过容器时，flex的垂直居中会让滚动容器自动滚动到内容中间位置，导致首次显示从第12项开始；但去掉它又会让少项列表无法居中。

解决方案 #

我们可以通过CSS布局+JS强制滚动的组合来兼顾两种场景：

1. 调整CSS结构

/* 分屏容器 */
.split-screen {
  display: none; /* 默认隐藏 */
  flex: 1;
  height: 100vh;
}

/* 左屏DVR区域 */
.left-panel {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 关键：禁止左屏滚动 */
  background: #000;
  color: #fff;
  font-size: 3rem;
}

/* 右屏列表容器父级 */
.right-panel {
  width: 50%;
  display: flex;
  align-items: center; /* 保留垂直居中，适配少项场景 */
  justify-content: center;
  padding: 1rem;
  background: #1a1a1a;
}

/* 列表滚动容器 */
.list-scroll-container {
  width: 100%;
  max-height: 100%; /* 限制高度为父容器的100% */
  overflow-y: auto; /* 内容超出时允许滚动 */
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* 列表项样式 */
.list-item {
  padding: 1rem;
  color: #fff;
  background: #333;
  border-radius: 4px;
  transition: background 0.2s;
}

.list-item.active {
  background: #0066cc;
}

2. 按"m"键时强制滚动到顶部

在触发分屏显示的逻辑中，添加一行代码强制列表滚动到初始位置：

document.addEventListener('keydown', (e) => {
  if (e.key === 'm') {
    const splitScreen = document.querySelector('.split-screen');
    const listContainer = document.querySelector('.list-scroll-container');
    const listItems = document.querySelectorAll('.list-item');
    
    // 切换分屏显示状态
    splitScreen.style.display = splitScreen.style.display === 'flex' ? 'none' : 'flex';
    
    if (splitScreen.style.display === 'flex') {
      // 重置焦点到第一项
      activeIndex = 0;
      listItems.forEach((item, idx) => {
        item.classList.toggle('active', idx === activeIndex);
      });
      // 强制滚动到顶部，解决初始位置偏移问题
      listContainer.scrollTop = 0;
    }
  }
});

问题2：按下方向键时左屏跟随滚动 #

问题原因 #

左屏和右屏可能共享了同一个滚动上下文，或者方向键事件冒泡导致页面整体滚动，进而带动左屏。

解决方案 #

通过阻止事件冒泡+锁定左屏滚动来解决：

let activeIndex = 0;
const listItems = document.querySelectorAll('.list-item');

document.addEventListener('keydown', (e) => {
  const isSplitScreenVisible = document.querySelector('.split-screen').style.display === 'flex';
  
  if (isSplitScreenVisible && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
    // 1. 阻止默认页面滚动行为
    e.preventDefault();
    // 2. 阻止事件冒泡到父容器，避免影响左屏
    e.stopPropagation();
    
    // 更新焦点索引
    if (e.key === 'ArrowUp' && activeIndex > 0) {
      activeIndex--;
    } else if (e.key === 'ArrowDown' && activeIndex < listItems.length - 1) {
      activeIndex++;
    }
    
    // 更新焦点样式
    listItems.forEach((item, idx) => {
      item.classList.toggle('active', idx === activeIndex);
    });
    
    // 确保焦点项在可见区域内（仅在右屏列表容器内滚动）
    const activeItem = listItems[activeIndex];
    activeItem.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest' // 保持项在可见区域即可，无需强制居中
    });
  }
});

最终效果验证 #

1. 按"m"键：分屏显示，左屏居中显示"DVR"，右屏列表从第0项开始，少项时列表垂直居中。
2. 按上下键：仅右屏列表滚动切换焦点，左屏完全静止。

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