使用animation来实现时段的滚动效果

animation可以设置滚动时间的快慢,时间越长，滚动越慢。

结合@keyframes设置横向向左滚动,滚动的开始和滚动的结束。

使用粘性定位，定位第一列和最后一列。

效果图如下：

html代码供大家参考：

<style>
    .wrapper{
        width: 80%;
        height: 300px;
        border: 1px solid #ccc;
    }

    /* 深蓝主题 */
    .data-panel {
      background: #1a365d;
      padding: 5px;
      border-radius: 8px;
      color: white;
      font-family: Arial, sans-serif;
    }
    
    /* 固定列布局 */
    .layout-wrapper {
      display: grid;
      grid-template-columns: 120px 1fr 80px;
      position: relative;
    }
    
    /* 固定列样式 */
    .fixed-column {
      position: sticky;
      z-index: 2;
      background: #2c5282;
      padding: 12px;
      border-bottom: 1px solid #1a365d;
    }
    
    /* 左侧时段列 */
    .time-label {
      left: 0;
      box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    }
    
    /* 右侧汇总列 */
    .summary-col {
      box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    }
    
    /* 无限滚动容器 */
    .scroll-container {
      overflow: hidden;
      position: relative;
      height: 40px;
    }
    
    /* 无限滚动内容 */
    .time-slider {
      display: flex;
      position: absolute;
      white-space: nowrap;
      animation: scroll 20s linear infinite;
    }
    
    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-20%); }
    }
    
    /* 时间块样式 */
    .time-block {
      width: 120px;
      padding: 12px;
      border-right: 1px solid #2a4365;
      text-align: center;
      flex-shrink: 0;
    }
    
    /* 数据行公共样式 */
    .data-row {
      display: grid;
      grid-template-columns: 120px 1fr 80px;
      border-bottom: 1px solid #2a4365;
    }
    
    .data-cell {
      width: 120px;
      padding: 12px;
      text-align: center;
    }
    </style>
    <div class="wrapper">
    <div class="data-panel">
      <!-- 表头 -->
      <div class="layout-wrapper">
        <div class="fixed-column time-label">时段</div>
        <div class="scroll-container">
          <div class="time-slider">
            <div class="time-block">08:30-10:30</div>
            <div class="time-block">10:30-12:30</div>
            <div class="time-block">14:30-16:30</div>
            <div class="time-block">16:30-18:30</div>
            <div class="time-block">18:30-20:30</div>
            <div class="time-block">20:30-22:30</div>
            <div class="time-block">22:30-00:30</div>
            <div class="time-block">00:30-02:30</div>
            <div class="time-block">02:30-04:30</div>
            <div class="time-block">04:30-06:30</div>
            <div class="time-block">06:30-08:30</div>
          </div>
        </div>
        <div class="fixed-column summary-col">汇总</div>
      </div>
    
      <!-- 数据行 -->
      <div class="data-row">
        <div class="fixed-column time-label">投入</div>
        <div class="scroll-container">
          <div class="time-slider">
            <div class="data-cell">269</div>
            <div class="data-cell">209</div>
            <div class="data-cell">263</div>
            <div class="data-cell">337</div>
            <div class="data-cell">337</div>
            <div class="data-cell">311</div>
            <div class="data-cell">267</div>
            <div class="data-cell">269</div>
            <div class="data-cell">209</div>
            <div class="data-cell">263</div>
            <div class="data-cell">287</div>
          </div>
        </div>
        <div class="fixed-column summary-col">2159</div>
      </div>
    </div>
     
    </div>
    <script>
    </script>

LayUI模板语法：

<div class="data-panel">
      <!-- 表头 -->
      <div class="layout-wrapper">
		  {{#  layui.each(d.headList, function(index, item){ }}
		   <div class="fixed-column time-label">{{item.time}}</div>
        <div class="scroll-container">
          <div class="time-slider">
			  {{#  layui.each(item.slider, function(index1, item1){ }}
			  <div class="time-block">{{item1}}</div>
			  {{#  }); }}
          </div>
        </div>
        <div class="fixed-column summary-col">{{item.all}}</div>
		  {{#  }); }}
      </div>
      <!-- 数据行 -->
	 {{#  layui.each(d.contentList, function(index, item){ }}
      <div class="data-row">
        <div class="fixed-column time-label">{{item.TIME}}</div>
        <div class="scroll-container">
          <div class="time-slider">
			  {{#  layui.each(item.SLIDER, function(index1, item1){ }}
			    <div class="data-cell">{{item1}}</div>
			   {{#  }); }}
          </div>
        </div>
        <div class="fixed-column summary-col">{{item.ALL}}</div>
      </div>
      {{#  }); }}
    </div>

伪数据：

headList: [{
        time:"时段",
        slider:["08:30-10:30","10:30-12:30","12:30-14:30","14:30-16:30","16:30-18:30","18:30-20:30","20:30-22:30","22:30-00:30","00:30-02:30","02:30-04:30","04:30-06:30","06:30-08:30"],
        all:"汇总"
      }],
	contentList:[
        {
          TIME:"投入",
          SLIDER:["111","222","333","444","555","666","777","777","777","777","777","777"],
          ALL:"5678"
        },
        {
          TIME:"产出",
          SLIDER:["111","222","333","444","555","666","777","777","777","777","777","777"],
          ALL:"5828"
        }
      ]