Chrome扩展开发：如何用CSS/JS实现长内容双列滚动效果

针对狭长页面双列连续滚动需求完全可以实现，以下是可直接落地的实现方案，补全现有代码缺失的滚动方向判断、列切换逻辑。

核心实现思路 #

• 用CSS多列布局把原页面长文本自动拆分为等高双列，不需要手动拆分DOM节点
• 记录滚动位置差值判断滚动方向（上滚/下滚）
• 监听滚动事件计算当前列边界：下滚触达当前列底部时自动切到下一列顶部，上滚触达当前列顶部时自动切到上一列底部
• 加防抖避免滚动事件高频触发导致的跳转动画错乱
• 用简单遮罩层隐藏非激活列，避免跨列时视觉跳变

完整实现代码 #

1. 注入CSS（扩展content_scripts配置里注入即可） #

/* 双列布局基础样式 */
main .doc-content {
  column-count: 2 !important;
  column-gap: 48px !important;
  height: calc(100vh - 80px) !important;
  overflow: hidden !important;
}
/* 避免代码块、图片被拆分到两列 */
main .doc-content pre,
main .doc-content img,
main .doc-content table,
main .doc-content h2,
main .doc-content h3 {
  break-inside: avoid !important;
}
/* 列遮罩，隐藏非激活列 */
.col-mask {
  position: fixed;
  top: 80px;
  bottom: 0;
  width: calc(50% - 24px);
  z-index: 999;
  pointer-events: none;
}
.col-mask.left {
  left: 24px;
}
.col-mask.right {
  right: 24px;
  background: var(--page-bg, #fff);
}

2. 核心JS逻辑（替换未完成的原有代码） #

let curColumn = 0; // 0=左列，1=右列
let lastScrollTop = 0;
const scrollContainer = document.querySelector('main');
const COLUMN_COUNT = 2;
let scrollDebounce = null;

// 绑定滚动事件
scrollContainer.addEventListener('scroll', () => {
  if (scrollDebounce) clearTimeout(scrollDebounce);
  scrollDebounce = setTimeout(handleScrollSwitch, 30);
});

function handleScrollSwitch() {
  const currentScroll = scrollContainer.scrollTop;
  const direction = currentScroll > lastScrollTop ? 'down' : 'up';
  const containerH = scrollContainer.clientHeight;
  const totalScrollH = scrollContainer.scrollHeight;
  const singleColH = totalScrollH / COLUMN_COUNT;

  if (direction === 'down') {
    // 到达当前列底部，切下一列
    const colBottomPos = (curColumn + 1) * singleColH - containerH;
    if (currentScroll >= colBottomPos && curColumn < COLUMN_COUNT - 1) {
      curColumn++;
      scrollContainer.scrollTo({
        top: curColumn * singleColH,
        behavior: 'instant'
      });
      updateMaskState();
    }
  } else {
    // 到达当前列顶部，切上一列
    const colTopPos = curColumn * singleColH;
    if (currentScroll <= colTopPos && curColumn > 0) {
      curColumn--;
      scrollContainer.scrollTo({
        top: (curColumn + 1) * singleColH - containerH,
        behavior: 'instant'
      });
      updateMaskState();
    }
  }

  lastScrollTop = currentScroll;
}

// 更新遮罩显示状态
function updateMaskState() {
  const masks = document.querySelectorAll('.col-mask');
  masks.forEach((mask, idx) => {
    mask.style.background = idx === curColumn ? 'transparent' : 'var(--page-bg, #fff)';
  });
}

// 初始化
function init() {
  // 插入遮罩层
  const leftMask = document.createElement('div');
  leftMask.className = 'col-mask left';
  const rightMask = document.createElement('div');
  rightMask.className = 'col-mask right';
  document.body.append(leftMask, rightMask);
  // 初始定位到左列顶部
  scrollContainer.scrollTop = 0;
}

if (document.readyState === 'complete') {
  init();
} else {
  window.addEventListener('load', init);
}

原有代码问题修正 #

• 不存在document.documentElement.scrollBottom属性，滚动底部位置需要通过scrollHeight - clientHeight - scrollTop计算得到
• 缺少滚动方向判断逻辑，通过对比两次滚动回调的scrollTop差值即可判断方向
• 列切换后需要重置滚动位置到对应列的边界位置，否则会出现滚动循环触发的问题
• 跨列跳转必须用instant瞬时滚动，不能用平滑滚动，否则会重复触发滚动事件导致跳列异常

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