Question

我正在开发一种与老虎机性质相似的布局。它的每个子节点都是文本，并且布局是响应的（因此在不同的分辨率下，子节点的文本可能会或可能不会换行到多行，从而改变高度）。

布局将一次显示3个项目的可见“视口”。因此“视口”不会移动，所有孩子都需要具有相同的高度。这让我想到了两条不同的路线，但我无法做任何工作。

使用display：flex。使用列布局，您可以将它们全部堆叠。这个问题是，我不认为你可以让所有的孩子都有相同的高度，除非你在flex容器上指定一个计算的高度（因此，你必须使用js来计算所有flex子项的最大高度））
使用display：grid。开箱即用，您可以让所有孩子与网格具有相同的高度。问题是，如何隐藏溢出，保证您只在老虎机的“视口”中一次显示3个？

如果没有js计算，这种布局可能无法实现，但由于它必须完全响应，我不想在每个窗口调整大小时重做计算。任何人都可以想到使用纯CSS进行此操作的方法吗？

我做了一个小提琴来展示一个简单的实现。 “视口”是红色框，每个项目都在蓝色框中。在现实世界中，我会隐藏红色框外的所有内容，并且不希望在任何容器上专门设置高度。

var scroll = document.getElementById('scroll');
var wrapper = document.getElementById('wrapper');

scroll.addEventListener('click', function() {
  wrapper.classList.toggle('scrolled');
});

.example {
  display: flex;
}

.container {
  height: 90px;
  width: 300px;
  outline: 1px solid red;
  z-index:1;
}

.wrapper {
  display: flex;
  flex-direction: column;
  transition-property: transform;
  transition-duration: 500ms;
}

.wrapper.scrolled {
  transform: translateY(-300px);
}

.inner {
  outline: 1px solid blue;
  flex-grow: 1;
  height: 30px;
}

.buttons {
  margin-right: 3em;
}

<div class="example">
  <div class="buttons">
    <button id="scroll">Scroll</button>
  </div>

  <div class="container">
    <div id="wrapper" class="wrapper">
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
      <div class="inner">Some text</div>
    </div>
  </div>
</div>

Answer 1

嘿所以我想我得到了你想要的东西并设计了一个“老虎机”机制，用vh来扩展它的内外物体。

所以容器对象会有类似......

.container {
    width: 300px;
    height: 90vh;
    outline: 1px solid red;
    z-index:1;
    overflow: hidden;
}

......内部对象会有类似......

.inner {
    outline: 1px solid blue;
    flex-grow: 1;
    height: 30vh;
}

我还调整了Javascript滚动，以根据滚动的对象滚动的数量为基础。这可以通过计时器而不是按钮自动执行：

var scroll = document.getElementById('scroll');
var wrapper = document.getElementById('wrapper');
var innerArray = document.getElementsByClassName('inner');

var innerNum = 1; // Start at the second element
scroll.addEventListener('click', function() {
  if (innerNum == innerArray.length-2) { // Check to see if the last item has been scrolled to
    innerNum = 0; // Scroll back to the first item if it has
  }
  //wrapper.classList.toggle('scrolled');
  innerArray[innerNum].scrollIntoView({ 
    behavior: 'smooth' 
  });
  innerNum++;
});

Here是演示该示例的Codepen。如果你愿意，我可以进一步澄清代码。如果我对你的目标不以为然，我表示歉意！

创建一个动态高度为

1 个答案: