带行列标签的热力图滚动条位置优化需求

问题说明 #

当前实现将行列标签与热力图置于同一可滚动容器内，导致滚动条范围包含了标签区域，不符合仅热力图本体显示滚动条，且滚动时行列标签同步跟随的需求。

修改后代码实现 #

HTML 代码 #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
  <div class="corner"></div>
  <div class="col-labels">
    这是热力图上方的列标签
  </div>
  <div class="row-labels"> 
    这是热力图左侧的行标签
  </div>
  <div class="scrollable-container">
    <div class="heatmap">
      这是热力图本体
    </div>
  </div>
</div>
<script>
const scrollContainer = document.querySelector('.scrollable-container');
const rowLabels = document.querySelector('.row-labels');
const colLabels = document.querySelector('.col-labels');

scrollContainer.addEventListener('scroll', () => {
  rowLabels.scrollTop = scrollContainer.scrollTop;
  colLabels.scrollLeft = scrollContainer.scrollLeft;
});
</script>
</body>
</html>

CSS 代码 #

.container {
    width: 500px;
    height: 500px;
    border: 2px solid black;
    position: relative;
    display: grid;
    grid-template-columns: 100px auto;
    grid-template-rows: 100px auto;
} 

.col-labels {
    grid-row: 1;
    grid-column: 2;
    overflow-x: hidden;
    width: 100%;
    height: 100px;
    background-color: grey;
    padding: 8px;
    box-sizing: border-box;
}

.row-labels{
    grid-row: 2;
    grid-column: 1;
    overflow-y: hidden;
    width: 100px;
    height: 100%;
    background-color: grey;
    padding: 8px;
    box-sizing: border-box;
}

.corner{
    grid-row: 1;
    grid-column: 1;
    background-color: white;
    height: 100px;
    width: 100px;
}

.scrollable-container {
    grid-row: 2;
    grid-column: 2;
    overflow: auto;
}

.heatmap{
    height: 1000px;
    width: 1000px;
    background-color: blue;
}

关键修改点 #

• 将滚动容器从外层.container移至.scrollable-container，确保滚动条仅作用于热力图区域
• 移除行列标签的sticky定位，改为监听热力图容器的滚动事件，通过JavaScript同步行列标签的滚动位置
• 外层容器保持固定宽高的网格布局，行列标签始终占据对应位置，与热力图对齐

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