липкий элемент слева исчезает при прокрутке вправо - PullRequest
0 голосов
/ 11 октября 2018

Я пытаюсь создать веб-страницу с пятью регионами, три из них липкие.Функция закрепления отлично работает, когда пользователь прокручивает страницу вниз, но элементы, которые должны прилипать к левому краю, просто исчезают, когда окно прокручивается вправо на ширину одного окна просмотра.Я не знаю, насколько широкими будут заранее данные, поэтому я пытаюсь позволить элементам автоматически расширяться, чтобы соответствовать содержанию.Есть ли способ исправить это, чтобы левые элементы оставались видимыми, когда пользователь прокручивает все вправо?

Области описываются следующим образом:

  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>

1 Ответ

0 голосов
/ 11 октября 2018

У вас проблема с переполнением, ваше тело является блочным элементом, поэтому его ширина не будет превышать размер экрана, который создает проблему левой боковой панели.

Простое решение - сделать тело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>
...