在我当前的实现中，热图旁边的行标签和列标签也在可滚动容器内。因此，滚动条不仅覆盖热图本身，而且更宽更长，并且包括
css:
.container {
width: 500px;
height: 500px;
border: 2px solid black;
overflow: auto;
position: relative;
display: grid;
grid-template-columns: 100px auto;
grid-tempalte-rows: 100px auto;
}
.col-labels {
grid-row: 1;
grid-column: 2;
position: sticky;
top: 0;
left: 0;
width: 1000px;
height: 100px;
z-index: 10;
background-color: grey;
}
.row-labels{
grid-row: 2;
grid-column: 1;
position: sticky;
top: 0px;
left: 0px;
width: 100px;
height: 1000px;
z-index: 10;
background-color: grey;
}
.corner{
top: 0px;
left: 0px;
position: sticky;
grid-row: 1;
grid-column: 1;
background-color: white;
z-index: 20;
height: 100px;
width: 100px;
}
.heatmap{
grid-row: 2;
grid-column: 2;
height: 1000px;
width: 1000px;
background-color: blue;
}html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="corner">
</div>
<div class="col-labels">
Those are the column labels above the heatmap
</div>
<div class="row-labels">
Those are the row labels next to the heatmap
</div>
<div class="heatmap">
This is the heatmap
</div>
</div>
</body>
</html>是列标签和行标签。
预期行为： 只有实际的热图（没有列和行标签）旁边有滚动条。滚动热图时，行和列标签仍应滚动。
由于您的网格只有 2 行 2 列，因此您只需要很少的 css 即可实现这一点，您可以参考下面的代码片段。谢谢
.container {
width: 500px;
height: 500px;
display: grid;
grid-template-rows: 100px auto;
grid-template-columns: 100px auto;
border: 2px solid black;
}
.corner {
background-color: white;
}
.col-labels {
background-color: silver;
}
.row-labels {
background-color: grey;
}
.heatmap {
background-color: blue;
overflow: scroll;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rotated Blue Line</title>
</head>
<body>
<div class="container">
<div class="corner"></div>
<div class="col-labels">
Those are the column labels above the heatmap
</div>
<div class="row-labels">Those are the row labels next to the heatmap</div>
<div class="heatmap">
This is the heatmap. VERY_VERY_VERY_LONG_TEXT_JUST_TO_MOCK_SCROLL_X_VERY_VERY_VERY_LONG_TEXT_JUST_TO_MOCK_SCROLL_X_VERY_VERY_VERY_LONG_TEXT_JUST_TO_MOCK_SCROLL_X_VERY_VERY_VERY_LONG_TEXT_JUST_TO_MOCK_SCROLL_X_
Contrary to popular belief, Lorem Ipsum is not simply random text. It
has roots in a piece of classical Latin literature from 45 BC, making it
over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going through
the cites of the word in classical literature, discovered the
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
Cicero, written in 45 BC. This book is a treatise on the theory of
ethics, very popular during the Renaissance. The first line of Lorem
Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from 45 BC,
making it over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going through
the cites of the word in classical literature, discovered the
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
Cicero, written in 45 BC. This book is a treatise on the theory of
ethics, very popular during the Renaissance. The first line of Lorem
Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from 45 BC,
making it over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going through
the cites of the word in classical literature, discovered the
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
Cicero, written in 45 BC. This book is a treatise on the theory of
ethics, very popular during the Renaissance. The first line of Lorem
Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32.
</div>
</div>
</body>
</html>