求助：Material Design标签栏Sibling transitions水平滚动效果问题

几个关键修复点： #

1. 内容容器基础配置
   先给承载页面内容的容器设置正确的滚动属性，开启横向平滑滚动并禁用纵向滚动：

   .content-wrap {
     overflow-x: auto;
     overflow-y: hidden;
     display: flex;
     width: 100vw;
     scroll-behavior: smooth;
     /* 可选：隐藏滚动条以贴合Material Design风格 */
     scrollbar-width: none;
   }
   .content-wrap::-webkit-scrollbar {
     display: none;
   }
   

2. 标签切换的滚动触发逻辑
   切换标签时需主动触发对应内容区块的滚动定位，不能仅依赖样式：

   // 假设标签元素通过data-target属性关联对应内容区块ID
   const tabs = document.querySelectorAll('.tab-item');
   tabs.forEach(tab => {
     tab.addEventListener('click', () => {
       const target = document.getElementById(tab.dataset.target);
       if (target) {
         target.scrollIntoView({
           behavior: 'smooth',
           inline: 'start'
         });
       }
       // 同步更新标签激活状态
       tabs.forEach(t => t.classList.remove('active'));
       tab.classList.add('active');
     });
   });
   

3. 内容区块尺寸设置
   每个同级内容区块必须占满视口宽度，否则滚动位置会出现混乱：

   .content-section {
     min-width: 100vw;
     height: calc(100vh - 60px); /* 将60px替换为你的标签栏实际高度 */
   }
   

4. 滚动同步标签状态（可选但推荐）
   监听容器滚动事件，根据滚动位置自动切换激活标签，让交互逻辑更完整：

   const contentWrap = document.querySelector('.content-wrap');
   contentWrap.addEventListener('scroll', () => {
     const scrollLeft = contentWrap.scrollLeft;
     const sections = document.querySelectorAll('.content-section');
     sections.forEach((sec, idx) => {
       if (sec.offsetLeft <= scrollLeft && sec.offsetLeft + sec.offsetWidth > scrollLeft) {
         tabs.forEach(t => t.classList.remove('active'));
         tabs[idx].classList.add('active');
       }
     });
   });
   

如果已有类似逻辑但仍未生效，可排查以下几点：

• 内容容器是否正确设置了display: flex，确保区块横向排列
• 内容区块的宽度是否设置合理，避免出现宽度不足或溢出情况
• 事件绑定是否在DOM加载完成后执行，比如放在DOMContentLoaded回调中

内容的提问来源于stack exchange，提问作者Vitor Marques Lourenco