2

grid-template-rows每当您将鼠标悬停在具有overflow并将位置auto height移动scroll到溢出容器底部的任何元素上时（body在这种情况下），这是预期的行为吗？

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

当我移除:hover滚动条时li不会中断。

.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>

另一方面，如果您将中间值硬编码为 ie40vh而不是autoscroll 按预期工作。

.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>

4

1 回答 1

2

在使用属性auto值时，我注意到 CSS Grid 中有几个奇怪的行为（示例）。一直对我有用的是从 切换到.grid-template-*auto1fr

于 2017-05-26T17:34:22.597 回答