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

Question

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

地区描述如下：

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 是一个块元素，所以它的宽度不会超过你的屏幕尺寸，这会造成左侧边栏的问题。

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