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-* 属性 ( example ) 上使用 auto 值时，我注意到 CSS Grid 中出现了一些奇怪的行为。对我来说一直有效的方法是从 auto 切换到 1fr。