如何实现移动端文本栏的横向滑动吸附导航

一、导航名称明确 #

你要实现的组件叫做横向滚动吸附标签栏（Horizontal Snap Scroll Tab Bar），也常被称为滑动标签导航，搜索这个关键词能找到更多参考案例。

二、轻量实现方案（Tailwind + 原生JS，无额外依赖） #

结合你的技术栈，下面是可复用代码，解决侧边栏消失、滚动条异常、激活状态错乱的问题：

1. HTML结构（适配Filament组件写法） #

<div class="flex flex-col">
    <!-- 移动端横向滚动标签栏，md及以上切换为垂直布局 -->
    <div class="md:hidden relative">
        <div class="overflow-x-auto scrollbar-hide snap-x snap-mandatory flex space-x-2 px-4 py-2">
            <button id="surface-tab" class="tab-btn active whitespace-nowrap px-4 py-2 rounded-full bg-primary text-white snap-center">
                Surface
            </button>
            <button id="shallow-tab" class="tab-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-200 text-gray-700 snap-center">
                Shallow
            </button>
            <button id="deep-tab" class="tab-btn whitespace-nowrap px-4 py-2 rounded-lg bg-gray-200 text-gray-700 snap-center">
                Deep
            </button>
        </div>
        <!-- 可选：底部激活指示器 -->
        <div id="tab-indicator" class="absolute bottom-0 left-0 h-0.5 bg-primary transition-all duration-300"></div>
    </div>

    <!-- md及以上屏幕的垂直布局 -->
    <div class="hidden md:block flex flex-col space-y-2 px-4 py-2">
        <button id="surface-tab-desktop" class="tab-btn-desktop active px-4 py-2 rounded-lg bg-primary text-white">
            Surface
        </button>
        <button id="shallow-tab-desktop" class="tab-btn-desktop px-4 py-2 rounded-lg bg-gray-200 text-gray-700">
            Shallow
        </button>
        <button id="deep-tab-desktop" class="tab-btn-desktop px-4 py-2 rounded-lg bg-gray-200 text-gray-700">
            Deep
        </button>
    </div>

    <!-- 对应内容区域 -->
    <div class="mt-4 p-4 bg-white rounded-lg">
        <div id="surface-content" class="tab-content block">
            <!-- Surface内容 -->
        </div>
        <div id="shallow-content" class="tab-content hidden">
            <!-- Shallow内容 -->
        </div>
        <div id="deep-content" class="tab-content hidden">
            <!-- Deep内容 -->
        </div>
    </div>
</div>

2. Tailwind配置（添加滚动条隐藏类） #

如果你的Tailwind默认没有scrollbar-hide类，在tailwind.config.js中配置：

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwind-scrollbar-hide'),
    // 保留Filament原有插件
  ],
}

执行npm install tailwind-scrollbar-hide安装依赖即可。

3. 原生JS逻辑（处理激活状态与滚动吸附） #

// 移动端标签交互
const tabButtons = document.querySelectorAll('.tab-btn');
const tabIndicator = document.getElementById('tab-indicator');
const tabContents = document.querySelectorAll('.tab-content');

// 初始化指示器位置
if (tabIndicator && tabButtons.length) {
    const activeTab = document.querySelector('.tab-btn.active');
    tabIndicator.style.width = `${activeTab.offsetWidth}px`;
    tabIndicator.style.left = `${activeTab.offsetLeft}px`;
}

// 标签点击事件
tabButtons.forEach(button => {
    button.addEventListener('click', () => {
        // 重置所有标签与内容状态
        tabButtons.forEach(btn => {
            btn.classList.remove('active', 'bg-primary', 'text-white');
            btn.classList.add('bg-gray-200', 'text-gray-700');
        });
        tabContents.forEach(content => {
            content.classList.add('hidden');
            content.classList.remove('block');
        });

        // 设置当前标签与内容为激活状态
        button.classList.add('active', 'bg-primary', 'text-white');
        button.classList.remove('bg-gray-200', 'text-gray-700');
        const contentId = button.id.replace('-tab', '-content');
        document.getElementById(contentId).classList.add('block');
        document.getElementById(contentId).classList.remove('hidden');

        // 更新指示器位置
        if (tabIndicator) {
            tabIndicator.style.width = `${button.offsetWidth}px`;
            tabIndicator.style.left = `${button.offsetLeft}px`;
        }

        // 滚动到当前标签并吸附
        button.scrollIntoView({ behavior: 'smooth', inline: 'center' });
    });
});

// 桌面端标签交互
const desktopTabButtons = document.querySelectorAll('.tab-btn-desktop');
desktopTabButtons.forEach(button => {
    button.addEventListener('click', () => {
        desktopTabButtons.forEach(btn => {
            btn.classList.remove('active', 'bg-primary', 'text-white');
            btn.classList.add('bg-gray-200', 'text-gray-700');
        });
        tabContents.forEach(content => {
            content.classList.add('hidden');
            content.classList.remove('block');
        });

        button.classList.add('active', 'bg-primary', 'text-white');
        button.classList.remove('bg-gray-200', 'text-gray-700');
        const contentId = button.id.replace('-tab-desktop', '-content');
        document.getElementById(contentId).classList.add('block');
        document.getElementById(contentId).classList.remove('hidden');
    });
});

4. 关键问题解决说明 #

• 避免侧边栏消失：标签栏用flex flex-col嵌套，不会挤压Filament默认侧边栏布局。
• 隐藏横向滚动条：通过scrollbar-hide类实现，保留滚动功能的同时隐藏冗余滚动条。
• 滚动吸附：Tailwind的snap-x snap-mandatory和snap-center类实现标签吸附，点击时用scrollIntoView确保标签居中。
• 状态同步：JS统一处理标签与内容区域的显示/隐藏，避免DOM操作异常。

三、可选轻量库 #

如果不想手写原生JS，可以用SimpleBar（轻量滚动库，专注自定义滚动条），但上述原生方案已足够轻量，无需额外依赖。

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