Question

我正在测试滚动捕捉，并且发现了关于网格的一些东西。

* {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, calc((100vw - 2rem) / 3 - ((100vw - 100%) / 3)));
  grid-template-rows: repeat(10, calc((90vh) - ((90vh - 100%))));
  grid-gap: 1rem;
  list-style: none;
  padding: 1rem;
  margin: 0;
  height: 90vh;
  overflow: scroll;
  scroll-snap-type: both mandatory;
  scroll-padding: 1rem;
}

.card {

  scroll-snap-align: start;
  border-radius: 3px;
  background: red;
}

<ul class="grid">
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
</ul>

我通过从视口宽度（(100vw - 2rem)）中减去外部填充，然后减去垂直滚动条（(100vw - 100%)）的大小来计算列的大小。对于行也一样，只是我不需要在此处减去填充以使其适合视口。

如果一直滚动到最后，您会看到没有可见的padding-bottom或padding-right。如果检查它，您会看到元素的最后一行向上偏移1rem，向左偏移1rem。您还可以看到填充位于滚动条的后面。

为什么会这样？

Answer 1

找到了一个解决方案，尽管不是超级优雅。

.child:after {
    content: "";
    display: block;
    position: absolute;
    right: -2rem;
    width: 2rem;
    height: 1px;
}

似乎在溢出的容器中会忽略填充和边距，因此要在溢出的容器的右侧和底部添加边距或填充，您必须使用浏览器无法忽略的伪元素对其进行模拟。 / p>

来源：https://blog.alexandergottlieb.com/overflow-scroll-and-the-right-padding-problem-a-css-only-solution-6d442915b3f4

为什么最后一行元素在CSS网格中移位？

1 个答案: