子どもが動的な高さの「スロットマシン」を作成する

Question

私は、スロットマシンと本質的に似たレイアウトで作業しています。それぞれの子はテキストになり、レイアウトは応答します（異なる解像度では、子供のテキストは複数の行に折り返されることもあれば、高さが変わることもあります）。

レイアウトには、一度に3つのアイテムの「ビューポート」が表示されます。 「ビューポート」が移動しないように、すべての子供は同じ高さを持つ必要があります。これは私に2つの異なるルートを考えさせましたが、私はどちらかの作業をすることができません。

1. display：flexを使用します。列レイアウトを使用すると、それらをすべてスタックにすることができます。この問題は、フレックスコンテナに計算された高さを指定しない限り、すべての子を同じ高さにすることはできないと考えています（したがって、フレックスのすべての子の最大高さを計算するためにjsを使用する必要があります）
2. 表示：グリッドを使用します。箱から外に出すと、すべての子供がグリッドと同じ高さになることができます。問題は、スロットマシンの「ビューポート」に一度に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を使用して、その内側と外側のオブジェクトをスケール「スロットマシン」メカニックを設計しました。私もJavascriptがにスクロール調整

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

だから、コンテナオブジェクトのようなものを持っているでしょう...

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

...と内部オブジェクトは何かなどを持っているでしょう...どのオブジェクトがスクロールされているかをスクロールした量に基づいています。これは、代わりにボタンのタイマーのようなものを自動化することができます。

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です。私が望むなら、コードをさらに明確にすることができます。あなたが何をしようとしているのか、私がボールから離れていたら、私の謝罪です！