我正在尝试创建一个有五个区域的网页,其中三个是粘性的。当用户向下滚动时,粘滞特性工作得很好,但是当窗口向右滚动超过一个视区的宽度时,应该粘附在左侧的元素就会消失。我不知道数据会有多宽,这就是为什么我尝试允许元素自动扩展以适应内容。有没有办法解决这个问题,让左边的元素在用户滚动到右边时保持可见?
地域描述如下:
header
-当用户滚动vertically.upperleft
时,这个区域应该消失-这个区域是一个小的列标题,它粘在左边和顶部,而scrolling.upperright
-当垂直滚动时,这个区域应该只粘在顶部。当用户滚动到right.bottomleft
时,它应该消失在upperleft
后面-当用户向右滚动时,这个区域应该停留在屏幕的左侧,当用户滚动down.bottomright
时,这个区域应该消失在upperleft
后面-这个区域应该消失在upperleft
,upperright
和bottomleft
后面,这取决于用户滚动的方式。下面是一个演示问题的示例(我使用的是Firefox 62.0.3):
body {
margin: 1rem;
display: grid;
grid-template-columns: 3rem auto;
grid-template-rows: 12vh 2rem auto;
grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";}
.header {
position: fixed;
grid-area: header;
display: block;
background: white;
text-align: center;
width: 100vw;
}
.topleft {
grid-area: topleft;
background-color: #bababa;
border: solid 1px black;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.topright {
grid-area: topright;
background-color: #c0c0c0;
border: solid 1px black;
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
white-space: nowrap;
display: inline-block;
width: 300vw; /* simulate large horizontal data set */
}
.bottomleft {
grid-area: bottomleft;
background-color: #c0c0c0;
border: solid 1px black;
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
height: 300vh; /* simulate large vertical data set */
}
.bottomright {
grid-area: bottomright;
background-color: #cacaca;
border: solid 1px brown;
box-sizing: border-box;
text-align: left;
display: inline-block;
height: 300vh; /* simulate large vertical data set */
width: 300vw; /* simulate large horizontal data set */
}
<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="bottomright">
Large area with cells
</div>
https://stackoverflow.com/questions/52750172
复制相似问题