CSS实现甘特图日期横向滚动展示左侧隐藏日期问题求助

修改后CSS代码 #

.gantt-chart-wrapper {
    height: 581px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

.gantt-chart-table {
    border-radius: 10px;
    table-layout: fixed;
    /* 总宽度按实际日期列数调整，例：30天列*80px/列 = 2400px */
    width: 2400px;
    height: 100%;
}

.gantt-chart-table th, .gantt-chart-table td {
    width: 80px;
    box-sizing: border-box;
}

补充初始化JS代码 #

// 页面加载完成后执行，默认滚动到最右侧隐藏前4天
const ganttWrapper = document.querySelector('.gantt-chart-wrapper')
ganttWrapper.scrollLeft = ganttWrapper.scrollWidth - ganttWrapper.clientWidth

调整逻辑说明 #

• 原有代码将overflow属性设置在<thead>、<tbody>上不生效，这两类元素是表格内置语义节点，不支持自定义滚动行为，滚动逻辑需要迁移到外层容器.gantt-chart-wrapper上
• 表格不再设置width: 100%，改为根据所有日期列总宽度自定义赋值，保证所有日期单元格可以横向平铺展示
• 页面初始化时主动将滚动容器拉到最右侧，初始状态就会隐藏左侧前4天日期，用户横向向左滚动时，左侧隐藏的日期会逐步露出，同时右侧的日期会逐步被隐藏
• 如果存在固定的左侧任务列需要跟随垂直滚动、不跟随横向滚动，给任务列单独设置position: sticky; left: 0; z-index: 10;即可实现固定效果

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