水平滾動上的 CSS“位置：粘性”

Question

我正在嘗試構建一個水平滾動，其中包含屬於一個標題的多個內容框。 所以我希望在內容滾動過去時保留標題，直到下一個帶有新標題的部分出現。

這是我想要做的： https : //jsfiddle.net/kjo4duts/23/

 * { box-sizing: border-box; } body { margin: 0; padding: 0; } .scroll { display: flex; flex-direction: row; width: 100vw; height: 100px; background: yellow; overflow: scroll; } .item { flex-shrink: 0; width: 200px; height: 100%; margin-right: 20px; } .scroll .item .title { position: sticky; left: 0; top: 0; width: 100%; height: 40px; } .item .content { width: 100%; height: 60px; border: 3px solid green; }

 <div class="scroll"> <div class="item"> <div class="title"> Title 1 </div> <div class="content"> Content </div> </div> <div class="item"> <div class="title"> </div> <div class="content"> Content </div> </div> <div class="item"> <div class="title"> Title 2 </div> <div class="content"> Content </div> </div> <div class="item"> <div class="title"> </div> <div class="content"> Content </div> </div> <div class="item"> <div class="title"> </div> <div class="content"> Content </div> </div> </div>

有沒有辦法將“位置：粘性”屬性解決到外部父級（ .scroll ）？ 或者在 JavaScript 中是否有一種流暢的方法？ 我嘗試更改 HTML 結構，但是使用 Flexbox，您需要為每個框設置一個容器以獲得水平布局。

提前致謝！

編輯：對於任何有同樣問題的人。 解決方案是向外部父級添加一個相對位置，並稍微更改 HTML 結構。

查看更新的小提琴： https : //jsfiddle.net/r2czqwn7/20/

Answer 1

Parent ( .scroll ) 必須是position: relative ，你可以在下面查看，但我會考慮不同的結構（具有相同標題的所有內容可以在同一個 div 中）以將其粘貼在多個項目上。

 * { box-sizing: border-box; } body { margin: 0; padding: 0; } .scroll { position: relative; display: flex; flex-direction: row; width: 100vw; height: 100px; background: yellow; overflow: scroll; } .item { flex-flow: column; flex-shrink: 0; width: 200px; height: 100%; margin-right: 20px; } .scroll .item .title { position: sticky; display: inline; left: 0; top: 0; width: 100%; height: 40px; } .item .content { width: 100%; height: 60px; border: 3px solid green; } .item .content:first-child { margin-top: 1rem; }

 <div class="scroll"> <div class="item"> <div class="title"> Title 1 </div> <div class="content"> Content </div> </div> <div class="item"> <div class="content"> Content </div> </div> <div class="item"> <div class="title"> Title 2 </div> <div class="content"> Content </div> </div> <div class="item"> <div class="content"> Content </div> </div> <div class="item"> <div class="content"> Content </div> </div> </div>