html - 向右滚动时左侧粘性元素消失

Question

我正在尝试创建一个包含五个区域的网页，其中三个是粘性的。当用户向下滚动时，粘性功能工作正常，但是当窗口向右滚动超过一个视口(viewport)的宽度时，应该粘在左边的元素就会消失。我不知道数据会提前多宽，这就是为什么我试图让元素自动扩展以适应内容。有没有办法解决此问题，以便在用户一直向右滚动时左侧元素保持可见？

区域描述如下:

1. header - 当用户垂直滚动时该区域应该消失。

2. upperleft - 此区域是一个小的列标题，在滚动时会固定在左侧和顶部。

3. upperright - 垂直滚动时，此区域应仅贴在顶部。当用户向右滚动时，它应该消失在 upperleft 后面。

4. bottomleft - 当用户向右滚动时，该区域应位于屏幕左侧，而当用户向下滚动时，该区域应消失在 upperleft 后面。

5. bottomright - 该区域应该消失在 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>

Answer 1

您遇到了溢出问题，您的 body 是一个 block 元素，因此它的宽度不会超过您的屏幕尺寸，这会导致左侧边栏出现问题。

一个简单的解决方法是使主体 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>

为了更好地说明问题，您可以在初始代码中添加边框，您会看到左侧边栏将到达此边框然后停止:

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>

附带说明一下，最好避免将正文用作容器，最好依靠自己的容器，以便以后轻松添加更多结构或将代码集成到其他地方

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>