如何实现鼠标非聚焦时仍可滚动Tailwind CSS三列布局的中间列

要实现鼠标在页面任意位置都能滚动中间列，核心是监听全局滚动/滚轮事件，将滚动行为同步到中间列，同时禁用页面默认滚动。以下是具体实现：

1. 调整HTML结构（Tailwind CSS） #

<div class="grid grid-cols-4 gap-4 container md:max-w-7xl overflow-hidden h-screen">
  <!-- 左侧固定列 -->
  <div class="h-screen bg-gray-100 p-4">
    column 1
  </div>
  <!-- 中间可滚动列（添加ID用于JS控制） -->
  <div id="middle-scroll" class="col-span-2 h-screen overflow-y-auto p-4">
    <!-- 测试用长内容 -->
    <div class="h-[2000px] bg-gray-200">
      column 2 content<br>
      滚动测试内容<br>
      滚动测试内容<br>
      滚动测试内容<br>
      ...
    </div>
  </div>
  <!-- 右侧固定列 -->
  <div class="h-screen bg-gray-100 p-4">
    column 3
  </div>
</div>

2. 添加JavaScript控制逻辑 #

const middleColumn = document.getElementById('middle-scroll');

// 监听鼠标滚轮事件
window.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止页面默认滚动行为
  // 同步滚轮偏移量到中间列
  middleColumn.scrollTop += e.deltaY;
}, { passive: false });

// 兼容触摸设备（可选）
let touchStartY = 0;
window.addEventListener('touchstart', (e) => {
  touchStartY = e.touches[0].clientY;
});

window.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touchDelta = touchStartY - e.touches[0].clientY;
  middleColumn.scrollTop += touchDelta;
  touchStartY = e.touches[0].clientY;
}, { passive: false });

关键说明 #

• 最外层容器设置h-screen overflow-hidden：确保页面高度占满屏幕，同时隐藏浏览器默认滚动条，避免页面整体滚动
• 左右列设置h-screen：固定高度为屏幕高度，保持位置不变
• 中间列保留overflow-y-auto：当内容超出屏幕时显示自身滚动条，同时通过JS监听全局滚轮/触摸事件，将滚动动作同步到该列，实现全局滚动控制

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