使用 CSS 网格隐藏仅部分适合容器的项目

Question

我在一个容器中有一行项目，这些项目的大小取决于屏幕大小。 总会有项目留在网格之外，最后一个通常只有一半。

我需要做的是完全隐藏任何部分显示的项目。不幸的是，对于某些屏幕尺寸，我没有固定数量的项目，在这种情况下，我需要在我的容器中显示任意数量的项目。 如何做到这一点？

这是我当前代码的示例： 请注意最后一项如何仅部分适合屏幕。如果它不能完全放入我的容器中，我想隐藏它。

如何做到这一点？

const Item = () => {
  return (
    <div className="item"/>
  );
};

const App = () => {
  return (
    <div>
      <div className="container">
        {Array.from({ length: 20 }).map((_, index) => (
          <Item key={index} />
        ))}
      </div>
      <p>
        Objective: all items need to be within the container. See how the last
        one only fits half way. I would like it to be completely hidden.
      </p>
    </div>
  );
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.item {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 3px solid blue;
}

.container {
  padding: 10px;
  width: 60%;
  overflow: hidden;
  border: 3px solid black;
  
  /* CSS grid related properties */
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-auto-rows: 120;
  grid-auto-flow: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

编辑：这个组合还有另一个复杂之处，那就是我应该在所有隐藏的项目上都有一个按钮，只要按下该按钮就可以滚动到隐藏的项目。 所以基本上我仍然需要将所有项目隐藏在一边，而不是在可见行的下方。

Answer 1

一种（稍微费力的）方法是在容器的右侧附加一个伪元素，以覆盖部分包含的项目。

这是一个简化的 JS 版本。它遍历项目，直到找到未完全包含在容器中的第一个项目，然后计算容器中剩余的数量并将伪元素的宽度设置为该值。

这样剩余的项目不会受到任何影响，它们仍然“存在”，但这确实意味着只要有任何水平滚动或任何视口大小调整，就必须再次进行计算。

function hide() {
const container = document.querySelector('.container');
const items = container.querySelectorAll('.item');
const containerW = window.getComputedStyle(container).width.replace('px', '');
for ( let i = 0; i < items.length; i++) {
   const item = items[i];
   const w = Number(window.getComputedStyle(item).width.replace('px',''));
   const rhs = (w + item.offsetLeft);
  if (rhs > containerW) {
    container.style.setProperty('--w', w - (rhs - containerW) + 'px');
    break;
  }
}
}
hide();
window.onresize = hide;

.container {
    padding: 10px;
    width: 60%;
    overflow: hidden;
    border: 3px solid black;
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    grid-auto-rows: 120;
    grid-auto-flow: column;
    position: relative;
    --w: 0;
    box-sizing: border-box;
}
.container::after {
  content: '';
  width: var(--w);
  background: white;
  height: 100%;
  right: 0;
  top: 0;
  display: inline-block;
  z-index: 1;
  position: absolute;
}

.item {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 3px solid blue;
    box-sizing: border-box;
}

<div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>

注意容器和项目被赋予 box-siainv:border-box 只是为了使计算更容易。如果将其删除，则需要考虑边框和边距设置。