如何实现子元素高度不一的水平滚动容器及联动头部？

需求概述 #

容器内头部需始终跟随水平滚动，但仅当容器存在垂直滚动时才跟随垂直滚动；容器不能被最高子元素撑高，同时要保证滚动流畅、多端兼容。

核心需求 #

• 头部始终跟随水平滚动
• 仅容器存在垂直滚动时，头部才跟随垂直滚动
• 容器保持自身尺寸，不被最高子元素撑高
• 滚动体验流畅
• 移动端/桌面端、跨浏览器兼容

问题解答 #

1. 纯CSS方案能否实现？ #

目前无法仅通过纯CSS实现这个需求。因为CSS没有原生能力检测容器是否存在垂直滚动条，也无法根据滚动状态动态控制头部的垂直跟随行为——尤其是在容器不被最高子元素撑高的前提下，CSS无法关联水平滚动容器和头部的垂直定位逻辑。

2. 优化后的JavaScript方案 #

要解决滚动流畅性和兼容问题，需从事件节流、滚动状态判断、定位逻辑优化三个方向入手：

关键优化点

• 使用requestAnimationFrame替代高频scroll事件监听，避免布局抖动
• 实时检测当前激活的滚动容器是否存在垂直滚动条，动态切换头部的垂直跟随状态
• 采用transform进行定位更新，利用GPU加速保证流畅性
• 兼容旧浏览器的滚动条检测逻辑

完整实现代码

HTML

<header class="card">
  <h2>
    Exploring Transformation: Artificial Intelligence and Climate Change
  </h2>
  <p>
    Delve into two distinct yet interconnected realms of human innovation
    and global concern. First, journey through the evolution of Artificial
    Intelligence (AI) as it progresses from its mid-20th-century inception
    to the transformative technology it is today. Discover how AI has
    revolutionized industries, healthcare, and decision-making, while also
    posing challenges like job displacement and bias.
  </p>
</header>
<main>
  <div class="l-include-gutter">
    <div class="l-article">
      <button>Click on me !</button>
      <article class="card">
        <h3>Climate change</h3>
        <p>
          Climate change is one of the most pressing issues facing humanity
          today. It refers to long-term changes in global temperature and
          weather patterns, primarily driven by human activities such as the
          burning of fossil fuels, deforestation, and industrial processes.
        </p>
      </article>
    </div>
  </div>
  <div class="l-include-gutter">
    <div class="l-article">
      <button>Click on me !</button>
      <article class="card">
        <h3>The Evolution of Artificial Intelligence</h3>
        <p>
          Artificial Intelligence (AI) has come a long way since its
          inception in the mid-20th century. The term "artificial
          intelligence" was first coined by John McCarthy in 1956 during a
          Dartmouth College workshop. Early AI research focused on symbolic
          reasoning and rule-based systems, but progress was slow due to
          limited computing power.
        </p>

        <p>
          In the 21st century, AI entered a new era, thanks to advancements
          in machine learning and neural networks. Deep learning, a subset
          of machine learning, made it possible for computers to process
          vast amounts of data and perform complex tasks. This breakthrough
          paved the way for the development of AI systems that could
          understand natural language, recognize images, and even beat human
          champions in games like chess and Go.
        </p>

        <h3>Applications of AI Across Industries</h3>
        <p>
          AI has revolutionized healthcare by improving diagnosis,
          treatment, and patient care. Machine learning algorithms can
          analyze medical images, such as X-rays and MRI scans, to detect
          abnormalities and assist radiologists in making accurate
          diagnoses. Additionally, AI-driven chatbots and virtual nurses are
          enhancing patient engagement and monitoring.
        </p>

        <p>
          In the financial industry, AI is used for algorithmic trading,
          fraud detection, credit risk assessment, and customer service.
          AI-powered robo-advisors provide personalized investment
          recommendations, while natural language processing enables
          sentiment analysis of news and social media for trading decisions.
        </p>

        <p>
          AI is transforming education through personalized learning
          platforms that adapt to students' needs and abilities. Intelligent
          tutoring systems provide instant feedback and tailored exercises,
          enhancing student performance. Furthermore, AI-driven analytics
          help educators identify at-risk students and implement timely
          interventions.
        </p>

        <p>
          Automation and robotics have long been associated with
          manufacturing, but AI is taking these technologies to the next
          level. AI-driven robots can perform complex tasks with precision,
          reducing errors and increasing efficiency. Predictive maintenance
          powered by AI minimizes equipment downtime, saving companies
          millions.
        </p>

        <p>
          The transportation sector is experiencing a seismic shift with
          AI-driven autonomous vehicles. Companies like Tesla and Waymo are
          developing self-driving cars that promise safer and more efficient
          transportation. AI also optimizes traffic management, reducing
          congestion and emissions.
        </p>

        <p>
          AI has made its mark in the entertainment industry through content
          recommendation systems like Netflix's recommendation algorithm.
          Additionally, AI-generated art and music are gaining recognition
          in the creative world, blurring the lines between human and
          machine creativity.
        </p>

        <h3>Benefits of AI</h3>
        <p>AI offers numerous benefits, including:</p>
        <ul>
          <li>
            Efficiency and Productivity: AI automates routine tasks, freeing
            up human workers to focus on more creative and strategic
            endeavors. This increases productivity and reduces the risk of
            human error.
          </li>
          <li>
            Improved Decision-Making: AI systems can analyze vast datasets
            and provide insights that humans might overlook. This helps
            businesses make data-driven decisions and stay competitive.
          </li>
          <li>
            Enhanced Healthcare: AI assists medical professionals in
            diagnosing diseases, predicting outbreaks, and developing
            personalized treatment plans, ultimately improving patient
            outcomes.
          </li>
          <li>
            Safety and Security: AI is used in cybersecurity to detect and
            prevent cyberattacks. It also enhances physical security through
            facial recognition and surveillance systems.
          </li>
        </ul>

        <h3>Challenges and Concerns</h3>
        <p>
          Despite its advantages, AI also presents challenges and concerns:
        </p>
        <ul>
          <li>
            Job Displacement: One of the most significant concerns
            surrounding AI is the potential for job displacement. As AI
            systems automate tasks, some traditional jobs may become
            obsolete, requiring a shift in workforce skills and retraining.
          </li>
          <li>
            Bias and Fairness: AI algorithms can inherit biases present in
            the data they are trained on, leading to discriminatory
            outcomes. Ensuring fairness and transparency in AI systems is a
            critical challenge.
          </li>
          <li>
            Privacy: AI systems often require access to vast amounts of
            personal data. Protecting individuals' privacy while harnessing
            the power of AI is an ongoing concern.
          </li>
        </ul>
      </article>
    </div>
  </div>
</main>

CSS

:root {
  --common-width: 300px;
  --scrollbar-width: var(--scrollbar-width-js, 12px)
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
}

.card {
  width: var(--common-width);
  border-radius: 10px;
  padding: 15px 25px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(27, 31, 35, 0.15);
}

header {
  position: sticky;
  top: 0;
  margin: 20px auto;
  /* 启用GPU加速 */
  will-change: transform;
}

main {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  min-height: 100vh;
}

.l-include-gutter {
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: center;
  contain: size;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  overflow-x: clip;
}

.l-article {
  width: calc(100% + var(--scrollbar-width));
  display: flex;
  flex-direction: column;
  align-items: center;
}

@supports not (scrollbar-gutter: stable) {
  .l-article {
    overflow-y: scroll;
  }
}

JavaScript

// 滚动条宽度检测
const getScrollbarWidth = () => {
  const outer = document.createElement("div");
  outer.style.visibility = "hidden";
  outer.style.overflow = "scroll";
  outer.style.msOverflowStyle = "scrollbar";
  document.body.appendChild(outer);

  const inner = document.createElement("div");
  outer.appendChild(inner);

  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
  outer.parentNode?.removeChild(outer);

  return scrollbarWidth;
};

document.documentElement.style.setProperty(
  "--scrollbar-width-js",
  getScrollbarWidth() + "px"
);

// 核心滚动逻辑
const header = document.querySelector('header');
const mainContainer = document.querySelector('main');
const scrollContainers = document.querySelectorAll('.l-include-gutter');

let activeScrollContainer = scrollContainers[0];
let isVerticalScrollEnabled = false;

// 检测容器是否存在垂直滚动条
const hasVerticalScrollbar = (el) => {
  return el.scrollHeight > el.clientHeight;
};

// 更新头部垂直跟随状态
const updateHeaderVerticalState = () => {
  isVerticalScrollEnabled = hasVerticalScrollbar(activeScrollContainer);
};

// 处理水平滚动时的头部位置
const handleHorizontalScroll = () => {
  // 头部跟随水平滚动偏移
  header.style.transform = `translateX(${-mainContainer.scrollLeft}px)`;
};

// 处理垂直滚动时的头部位置
const handleVerticalScroll = () => {
  if (!isVerticalScrollEnabled) return;
  // 头部跟随垂直滚动偏移
  header.style.transform = `translateX(${-mainContainer.scrollLeft}px) translateY(${activeScrollContainer.scrollTop}px)`;
};

// 节流+requestAnimationFrame优化
let rafId;
const handleScroll = () => {
  if (rafId) cancelAnimationFrame(rafId);
  rafId = requestAnimationFrame(() => {
    handleHorizontalScroll();
    handleVerticalScroll();
  });
};

// 切换激活的滚动容器（基于滚动位置判断）
const updateActiveScrollContainer = () => {
  const scrollPos = mainContainer.scrollLeft;
  const containerWidth = mainContainer.clientWidth;
  const activeIndex = Math.round(scrollPos / containerWidth);
  activeScrollContainer = scrollContainers[activeIndex] || scrollContainers[0];
  updateHeaderVerticalState();
};

// 初始化事件监听
mainContainer.addEventListener('scroll', () => {
  updateActiveScrollContainer();
  handleScroll();
});

scrollContainers.forEach(container => {
  container.addEventListener('scroll', handleScroll);
});

// 初始化状态
updateHeaderVerticalState();

方案说明 #

1. 水平滚动跟随：通过监听main容器的水平滚动，用transform: translateX同步头部的水平位置，避免使用left属性引发重排。
2. 垂直滚动条件触发：实时检测当前激活的滚动容器是否存在垂直滚动条，只有存在时才同步垂直滚动偏移。
3. 流畅性优化：使用requestAnimationFrame包裹滚动逻辑，结合will-change: transform启用GPU加速，避免页面卡顿。
4. 兼容性处理：保留了滚动条宽度检测逻辑，兼容不支持scrollbar-gutter的浏览器。

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