CSS Grid水平滚动，在滚动项之前和之后添加空间 [英] CSS Grid Horizontal scroll, adding space before and after scrolled items

问题描述

我正在使用CSS网格为名片项目列表创建水平滚动。当您到达水平滚动的末尾时，我必须在列表的第一项左边留空格，在列表的最后一项右边留空格。但是，当滚动列表的中间时，侧面不应有任何间距。

I am using CSS grid to create a horizontal scroll for a list of card items. I am required to leave spacing at the first item of the list on the left, and the last item on the list on the right, when you have reached the end of the horizontal scroll. When scrolling through the middle of the list however, there should not be any spacing on the sides.

要求

1. 开始时的间距卡列表（左侧）


2. 卡列表末尾的间距（右侧）


3. 显示的卡数量必须为2.5（在页面加载时，显示2.5张卡以指示水平滚动可用）


4. 列表中的项目数可能有所不同，因此无法使用显式网格

1. Spacing on the start of the list of cards (on the left)
2. Spacing at the end of the list of cards (on the right)
3. The amount of cards shown must be 2.5 (on page load, show 2.5 cards to indicate that scrolling horizontally is availabale)
4. The number of items in the list can vary, so unable to use an explicit grid

示例应显示在列表的开头，并在左侧留有间距：

Example of how it should look at the beginning of the list, with spacing on the left side:

向右滚动时的外观示例以及向左滚动的外观示例：

Example of how it's supposed to look when scrolling on the right, and what it is not supposed to look like on the left side:

在列表末尾应该看起来像的示例，在右边有间距：

Example of how it's supposed to look like at the end of the list, with spacing on the rightside:

这里是对我要达到的目标进行编码。。

我尝试使用 :: before 和 :: after 来填充列表开头和结尾的空白区域，但是结果却很奇怪。

I have tried using a ::before and ::after on the ol to try and fill in the empty space of the beginning and the end of the list, but it was met with weird results.

   ol {
  padding: 0;
  list-style: none;
  display: grid; 
  grid-auto-flow: column;
  grid-gap: 1rem;
  overflow-x: auto;
  grid-template-columns: 1rem repeat(auto-fill, calc((20rem - 2rem) / var(--visible-cards))) 1rem;
  margin-left: -1rem;
  margin-right: -1rem;

  &::before,
  &::after {
    content: '';
  }

  &::before {
    grid-column: 1;
    background: blue;
  }

  &::after {
    grid-column: -1;
    background: red;
  }

:: after 不在列表的末尾，因为我认为应该通过应用 grid-column：-1 ，但它位于可见区域的末尾，在开始水平滚动之前。有人知道达到要求的方法吗？在此先感谢您！！！

The ::after is not at the end of the list as I thought it would be by applying the grid-column: -1, but instead it is at the end of the visible area, before the horizontal scrolling begins. Does anyone know of a way to achieve the requirements? Thanks in advance if you do!!!

推荐答案

如果有人有兴趣解决这个问题，最后我只使用了 :: after 元素充当所有 li 元素之后的空格。您可以在此处查看更新的代码笔： https://codepen.io/sammiepls/pen/qKwxBg

If anyone is interested in solving this, in the end I only used a ::after element to act as the space after all the li elements. You can see the updated codepen here: https://codepen.io/sammiepls/pen/qKwxBg

这篇关于CSS Grid水平滚动，在滚动项之前和之后添加空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！