向右滚动时左侧粘滞元素消失 [英] left-side sticky element disappears when scrolling to the right
问题描述
我正在尝试创建一个包含五个区域的网页，其中三个区域是粘性的.当用户向下滚动时，sticky功能可以正常工作，但是当窗口向右滚动超过一个视口的宽度时，应该粘在左侧的元素才消失.我不知道数据会提前多少，这就是为什么我试图允许元素自动扩展以适合内容.有没有一种方法可以解决此问题，以便在用户一直向右滚动时使左侧元素保持可见?
I am trying to create a web page with five regions, three of them are sticky. The sticky feature works fine when the user scrolls down, but the elements which should stick to the left just disappear when the window is scrolled to the right past the width of one viewport. I don't know how wide the data will be in advance, which is why I am trying to allow the elements to automatically expand to fit the contents. Is there a way to fix this so the left elements stay visible as the user scrolls all the way to the right?
区域描述如下:
-
header-当用户垂直滚动时，该区域应该消失.
header- This region should disappear when the user scrolls vertically.
upperleft -此区域是一个小的列标题，滚动时会粘贴在左侧和顶部.
upperleft - This region is a small column header which sticks to the left and top while scrolling.
upperright -垂直滚动时，该区域应仅停留在顶部.当用户向右滚动时，它应该消失在 upleftleft 后面.
upperright - This region should stick only to the top when scrolling vertically. It should disappear behind upperleft when the user scrolls to the right.
bottomleft -当用户向右滚动时，该区域应停留在屏幕的左侧；当用户向下滚动时，该区域应消失在 upleftleft 的后面.
bottomleft - This region should stick to the left of the screen when the user scrolls right and disappear behind upperleft when the user scrolls down.
bottomright -此区域应消失在 upleftleft ， upperright 和 bottomleft 之后用户滚动.
bottomright - This region should disappear behind upperleft, upperright, and bottomleft depending on how the user scrolls.
以下是一个演示该问题的示例(我使用的是Firefox 62.0.3):
Here is an example which demonstrates the problem (I am using 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>推荐答案
您遇到过头问题，您的身体是一个块元素，因此其宽度不会超过屏幕尺寸，从而不会产生左侧边栏问题.
You are having an overlfow issue, your body is a block element so its width won't exceed the dimension of your screen which create the issue of left sidebar.
一个简单的解决方法是使主体成为 inline-grid :
An easy fix is to make the body inline-grid:
body {
margin: 1rem;
display: inline-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>为了更好地说明问题，您可以在初始代码中添加边框，然后您会看到左侧边栏将到达此边框，然后停止:
To better illustrate the issue you can add border to the initial code and you will see that the left sidebar will reach this border and then stop:
body {
margin: 1rem;
display: grid;
border:2px solid red;
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>作为旁注，最好避免将主体用作容器，更好地依赖于自己的容器，以方便以后添加更多结构或将代码集成到其他地方
As a side note, it's good to avoid using the body as a container, better rely on your own container to make it easy to add more structure later or to integrate your code elsewhere
body {
margin:0;
}
.container {
margin: 1rem;
display: inline-grid;
border:2px solid red;
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="container">
<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>
</div>这篇关于向右滚动时左侧粘滞元素消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
