CSS grid-template-rows 悬停时自动将滚动位置重置到底部

Question

每当您将鼠标悬停在具有 overflow 和 auto height 的 grid-template-rows 部分中的任何元素上时，是否会将 scroll 位置移动到底部溢出的容器（在本例中为body）？

最明显的滚动中断效果是当您在 2 个 li 元素之间画圈并尝试向上或向下滚动片段 #1 时。

当我删除 li 上的 :hover 时，卷轴不会损坏。

.container{
  display: grid;
  grid-template-rows: 10vh auto 8vh;
  width: 400px;
  height: 300px;
  background: rgba(0,0,0.2);
}

.header{
  background: lightblue;
}

.body{
  background: white;
  overflow: auto;
}

.footer{
  background: lightgreen;
}

li{
  height: 30px;
  background: rgba(0,0,0,.5);
  opacity: 1;
}
li:nth-child(even){
  background: rgba(0,0,0,.2);
}

li:hover{
  opacity: .1;
}

<div class="container">
  <div class="header">header</div>
  <div class="body">body
  <ul>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
  </ul>
  </div>
  <div class="footer">footer</div>
</div>

另一方面，如果您将中间值硬编码为 40vh 而不是 auto，则滚动会按预期工作。

.container{
  display: grid;
  grid-template-rows: 10vh 40vh 8vh;
  width: 400px;
  height: 300px;
  background: rgba(0,0,0.2);
}

.header{
  background: lightblue;
}

.body{
  background: white;
  overflow: auto;
}

.footer{
  background: lightgreen;
}

li{
  height: 30px;
  background: rgba(0,0,0,.5);
  opacity: 1;
}
li:nth-child(even){
  background: rgba(0,0,0,.2);
}

li:hover{
  opacity: .1;
}

<div class="container">
  <div class="header">header</div>
  <div class="body">body
  <ul>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
  </ul>
  </div>
  <div class="footer">footer</div>
</div>

Answer 1

在 grid-template-* 属性 () 上使用 auto 值时，我注意到 CSS 网格中有几个奇怪的行为。一直对我有用的是从 auto 切换到 1fr。

CSS grid-template-rows 悬停时自动将滚动位置重置到底部

CSS grid-template-rows auto resetting scroll position to the bottom on hover

css

grid

overflow

css-grid