如何在侧边栏滚动到底部后激活主面板的滚动功能？

核心思路 #

通过监听滚动元素的wheel事件，判断元素是否已滚动到底部/顶部，阻止默认滚动行为后将滚动操作传递给目标元素，实现滚动上下文的无缝切换。

步骤1：设置CSS样式 #

确保滚动元素有明确高度限制和滚动属性：

.wrapper {
  display: flex;
  height: 100vh; /* 让容器占满视口高度 */
}

.sidebar {
  width: 250px;
  background: #f0f0f0;
  overflow-y: auto;
  scrollbar-width: thin; /* 优化滚动条视觉样式 */
}

.main-panel {
  flex: 1;
  overflow-y: auto;
}

.row {
  display: flex;
  height: 100%;
}

#col-1 {
  flex: 2;
  overflow-y: auto;
  background: #e0e0e0;
  padding: 1rem;
}

#col-2 {
  flex: 1;
  overflow-y: auto;
  background: #d0d0d0;
  padding: 1rem;
  scrollbar-width: thin;
}

/* 测试用：给内容添加足够高度触发滚动 */
.sidebar-content, #col-1-content, #col-2-content {
  height: 2000px;
}

步骤2：调整HTML结构 #

给滚动元素添加内容容器，方便测试滚动效果：

<div class='wrapper'>
  <div class='sidebar'>
    <div class="sidebar-content">我的侧边栏（滚动到底后，继续滚动会切换到主面板）</div>
  </div>
  <div class='main-panel'>
    <div class='row'>
      <div class='col-md-8' id='col-1'>
        <div id="col-1-content">当col-2滚动到底部时，此列内容开始滚动</div>
      </div>
      <div class='col-md-4' id='col-2'>
        <div id="col-2-content">此列滚动到底部后，触发col-1的滚动</div>
      </div>
    </div>
  </div>
</div>

步骤3：编写JavaScript逻辑 #

实现滚动上下文的切换：

// 判断元素是否已滚动到底部的工具函数
function isScrolledToBottom(element) {
  // 减1是为了避免浏览器精度差异导致的判断误差
  return element.scrollTop + element.clientHeight >= element.scrollHeight - 1;
}

// 监听侧边栏滚动
const sidebar = document.querySelector('.sidebar');
const mainPanel = document.querySelector('.main-panel');

sidebar.addEventListener('wheel', (e) => {
  // 侧边栏滚到底且向下滚动时，将滚动传递给主面板
  if (isScrolledToBottom(sidebar) && e.deltaY > 0) {
    e.preventDefault();
    mainPanel.scrollTop += e.deltaY;
  }
});

// 监听col-2滚动
const col2 = document.getElementById('col-2');
const col1 = document.getElementById('col-1');

col2.addEventListener('wheel', (e) => {
  // col-2滚到底且向下滚动时，传递给col-1
  if (isScrolledToBottom(col2) && e.deltaY > 0) {
    e.preventDefault();
    col1.scrollTop += e.deltaY;
  }
  // col-2滚到顶且向上滚动时，传递给主面板
  else if (col2.scrollTop === 0 && e.deltaY < 0) {
    e.preventDefault();
    mainPanel.scrollTop += e.deltaY;
  }
});

// 监听col-1滚动，滚到顶时向上滚动传递回col-2
col1.addEventListener('wheel', (e) => {
  if (col1.scrollTop === 0 && e.deltaY < 0) {
    e.preventDefault();
    col2.scrollTop += e.deltaY;
  }
});

框架适配（以React为例） #

如果使用React，需在组件生命周期中管理事件监听：

import { useEffect } from 'react';

function ScrollContainer() {
  useEffect(() => {
    const sidebar = document.querySelector('.sidebar');
    const mainPanel = document.querySelector('.main-panel');
    const col2 = document.getElementById('col-2');
    const col1 = document.getElementById('col-1');

    function isScrolledToBottom(element) {
      return element.scrollTop + element.clientHeight >= element.scrollHeight - 1;
    }

    const handleSidebarWheel = (e) => {
      if (isScrolledToBottom(sidebar) && e.deltaY > 0) {
        e.preventDefault();
        mainPanel.scrollTop += e.deltaY;
      }
    };

    const handleCol2Wheel = (e) => {
      if (isScrolledToBottom(col2) && e.deltaY > 0) {
        e.preventDefault();
        col1.scrollTop += e.deltaY;
      } else if (col2.scrollTop === 0 && e.deltaY < 0) {
        e.preventDefault();
        mainPanel.scrollTop += e.deltaY;
      }
    };

    const handleCol1Wheel = (e) => {
      if (col1.scrollTop === 0 && e.deltaY < 0) {
        e.preventDefault();
        col2.scrollTop += e.deltaY;
      }
    };

    sidebar.addEventListener('wheel', handleSidebarWheel);
    col2.addEventListener('wheel', handleCol2Wheel);
    col1.addEventListener('wheel', handleCol1Wheel);

    // 组件卸载时移除事件监听，避免内存泄漏
    return () => {
      sidebar.removeEventListener('wheel', handleSidebarWheel);
      col2.removeEventListener('wheel', handleCol2Wheel);
      col1.removeEventListener('wheel', handleCol1Wheel);
    };
  }, []);

  return (
    <div className='wrapper'>
      <div className='sidebar'>
        <div className="sidebar-content">我的侧边栏（滚动到底后，继续滚动会切换到主面板）</div>
      </div>
      <div className='main-panel'>
        <div className='row'>
          <div className='col-md-8' id='col-1'>
            <div id="col-1-content">当col-2滚动到底部时，此列内容开始滚动</div>
          </div>
          <div className='col-md-4' id='col-2'>
            <div id="col-2-content">此列滚动到底部后，触发col-1的滚动</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ScrollContainer;

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