如何实现页面与可滚动div元素间的滚动输入切换机制？

1. HTML 结构 #

先搭建基础页面结构，包含足够的前置/后置内容，以及目标可滚动div：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>滚动切换示例</title>
</head>
<body>
  <!-- 页面前置内容 -->
  <div class="page-content">
    <p>前置内容占位，往下滚动直到看到可滚动区域...</p>
    <!-- 重复足够多的行让页面能滚动 -->
    <p>前置内容行</p><p>前置内容行</p><p>前置内容行</p><p>前置内容行</p><p>前置内容行</p>
    <p>前置内容行</p><p>前置内容行</p><p>前置内容行</p><p>前置内容行</p><p>前置内容行</p>
    <p>前置内容行</p><p>前置内容行</p><p>前置内容行</p><p>前置内容行</p><p>前置内容行</p>
    <p>前置内容行</p><p>前置内容行</p><p>前置内容行</p><p>前置内容行</p><p>前置内容行</p>
  </div>

  <!-- 目标可滚动div -->
  <div class="scrollable-container" id="scrollableDiv">
    <div class="scrollable-content">
      <p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p>
      <p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p>
      <p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p>
      <p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p>
      <p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p>
      <p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p><p>可滚动区域内容行</p>
    </div>
  </div>

  <!-- 页面后置内容 -->
  <div class="page-content">
    <p>后置内容占位，可滚动区域到底后可继续滚动...</p>
    <p>后置内容行</p><p>后置内容行</p><p>后置内容行</p><p>后置内容行</p><p>后置内容行</p>
    <p>后置内容行</p><p>后置内容行</p><p>后置内容行</p><p>后置内容行</p><p>后置内容行</p>
    <p>后置内容行</p><p>后置内容行</p><p>后置内容行</p><p>后置内容行</p><p>后置内容行</p>
    <p>后置内容行</p><p>后置内容行</p><p>后置内容行</p><p>后置内容行</p><p>后置内容行</p>
  </div>
</body>
</html>

2. CSS 样式 #

设置基础样式，同时定义div固定居中的类：

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.page-content {
  padding: 20px;
  background-color: #f0f0f0;
}

.scrollable-container {
  width: 80%;
  height: 400px;
  margin: 40px auto;
  background-color: #fff;
  border: 1px solid #ddd;
  overflow-y: auto;
  /* 默认状态下的样式 */
}

/* 固定居中的类 */
.scrollable-container.fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.scrollable-content {
  padding: 20px;
}

3. JavaScript 逻辑 #

核心逻辑分为页面滚动检测、滚动权限切换、div边界检测三个部分：

const scrollableDiv = document.getElementById('scrollableDiv');
const body = document.body;
let isDivActive = false;
let lastPageScrollTop = 0;

// 计算视口中心位置
function getViewportCenterY() {
  return window.innerHeight / 2;
}

// 判断div是否到达视口中心
function isDivInViewportCenter() {
  const viewportCenter = getViewportCenterY();
  const rect = scrollableDiv.getBoundingClientRect();
  // 当div的中心进入视口中心±50px范围时触发（可调整阈值）
  return Math.abs((rect.top + rect.height / 2) - viewportCenter) < 50;
}

// 切换到div滚动模式
function activateDivScroll() {
  if (isDivActive) return;
  isDivActive = true;
  // 记录当前页面滚动位置
  lastPageScrollTop = window.scrollY;
  // 冻结页面滚动
  body.style.overflow = 'hidden';
  // 让div固定在视口中心
  scrollableDiv.classList.add('fixed-center');
  // 给div设置焦点，确保滚动事件能触发
  scrollableDiv.focus();
}

// 恢复页面滚动模式
function deactivateDivScroll() {
  if (!isDivActive) return;
  isDivActive = false;
  // 解除页面冻结
  body.style.overflow = '';
  // 移除固定居中类
  scrollableDiv.classList.remove('fixed-center');
  // 恢复页面之前的滚动位置
  window.scrollTo(0, lastPageScrollTop);
}

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  if (isDivActive) return; // 如果div已经激活，跳过页面滚动检测
  
  if (isDivInViewportCenter()) {
    activateDivScroll();
  }
});

// 监听div的滚动事件
scrollableDiv.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = scrollableDiv;
  
  // 到达顶部，且向上滚动时恢复页面
  if (scrollTop <= 0 && isDivActive) {
    deactivateDivScroll();
    // 恢复后手动触发一次页面滚动，让页面继续向上滚动
    window.scrollTo(0, lastPageScrollTop - 50);
  }
  
  // 到达底部，且向下滚动时恢复页面
  if (scrollTop + clientHeight >= scrollHeight - 5 && isDivActive) {
    deactivateDivScroll();
    // 恢复后手动触发一次页面滚动，让页面继续向下滚动
    window.scrollTo(0, lastPageScrollTop + 50);
  }
});

// 处理键盘滚动（比如方向键、空格）
scrollableDiv.addEventListener('keydown', (e) => {
  if (!isDivActive) return;
  
  const { scrollTop, scrollHeight, clientHeight } = scrollableDiv;
  
  // 向上滚动到顶时恢复页面
  if ((e.key === 'ArrowUp' || e.key === ' ') && scrollTop <= 0) {
    e.preventDefault();
    deactivateDivScroll();
    window.scrollTo(0, lastPageScrollTop - 50);
  }
  
  // 向下滚动到底时恢复页面
  if ((e.key === 'ArrowDown' || e.key === ' ') && scrollTop + clientHeight >= scrollHeight - 5) {
    e.preventDefault();
    deactivateDivScroll();
    window.scrollTo(0, lastPageScrollTop + 50);
  }
});

关键细节说明 #

• 触发阈值：isDivInViewportCenter 中的±50px是为了避免频繁切换，你可以根据需求调整这个值。
• 滚动恢复后的偏移：恢复页面滚动时手动设置scrollTo的偏移量，是为了让用户能继续顺畅滚动，避免卡在切换点。
• 焦点设置：激活div时调用scrollableDiv.focus()，确保鼠标滚轮和键盘事件能优先作用于div。
• 边界检测的容错：判断div到底部时用scrollTop + clientHeight >= scrollHeight -5，是因为浏览器可能存在像素精度问题，加个小容错值避免误判。

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