寻求移动端可滚动联动标签组件实现方案（仿Uber Eats）

可用前端库 #

• React生态：
  • react-scrollspy：专门处理滚动与导航标签的同步激活，支持动态更新标签列表，可配合react-horizontal-scrolling-menu实现标签栏横向滚动功能，两者集成成本低，能快速实现点击跳转、滚动同步的核心需求。使用时只需将菜单区域的ID与spy组件的targets对应，横向滚动菜单负责标签的可滑动展示。
• Vue生态：
  • vue-scrollactive：适用于Vue项目的滚动监听导航库，支持自动激活当前可视区域对应的标签，配合vue-horizontal-list实现标签栏横向滚动，动态标签可通过v-for直接渲染后端返回的菜单数据。
• 无框架通用库：
  • scrollspy-js：轻量级原生JS库，无框架依赖，支持滚动监听与标签激活，标签栏的横向滚动可通过纯CSS实现（设置overflow-x: auto + white-space: nowrap），无需额外插件。

快速实现案例 #

原生JS核心实现（基于Intersection Observer） #

// 监听菜单区域的可见性
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 移除所有标签的激活状态
      document.querySelectorAll('.category-tab').forEach(tab => tab.classList.remove('active'));
      // 激活对应标签
      document.querySelector(`[data-target="${entry.target.id}"]`).classList.add('active');
      // 滚动标签到可视区域
      document.querySelector(`[data-target="${entry.target.id}"]`).scrollIntoView({ inline: 'center' });
    }
  });
}, { threshold: 0.5 });

// 给每个菜单区域添加监听
document.querySelectorAll('.menu-section').forEach(section => observer.observe(section));

// 点击标签跳转对应区域
document.querySelectorAll('.category-tab').forEach(tab => {
  tab.addEventListener('click', () => {
    const targetId = tab.dataset.target;
    document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
  });
});

标签栏CSS：

.category-tabs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 8px 0;
}
.category-tabs::-webkit-scrollbar {
  display: none;
}
.category-tab {
  padding: 8px 16px;
  margin: 0 4px;
  cursor: pointer;
}
.category-tab.active {
  font-weight: bold;
  border-bottom: 2px solid #000;
}

React集成示例 #

import Scrollspy from 'react-scrollspy';
import { ScrollMenu, Item } from 'react-horizontal-scrolling-menu';

const CategoryTabs = ({ categories }) => {
  return (
    <ScrollMenu>
      <Scrollspy items={categories.map(c => c.id)} currentClassName="active">
        {categories.map(category => (
          <Item key={category.id}>
            <div className="category-tab" onClick={() => {
              document.getElementById(category.id).scrollIntoView({ behavior: 'smooth' });
            }}>
              {category.name}
            </div>
          </Item>
        ))}
      </Scrollspy>
    </ScrollMenu>
  );
};

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