我正在尝试使用属于一个标题的多个内容框构建一个水平滚动条。所以我希望在内容滚动过去时保留标题,直到下一个带有新标题的部分出现。
这是我想要做的: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/
答案 0 :(得分:0)
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>