Положение липкого и переполнения ограничения прокрутки - PullRequest
Новая
       35

Положение липкого и переполнения ограничения прокрутки

0 голосов
/ 12 июня 2018

Есть ли какие-либо ограничения на прокрутку переполнения или фиксированное положение?Я создал демо, если вы прокрутите в крайнее левое положение (чтобы все карты были сложены), а затем посмотрите на крайнюю правую карту.Все ок.Но если я изменю левое значение крайней правой карты, скажем, 1400px или что-то в этом роде, карта не будет двигаться вправо.Точно так же, как я это проверил, я добавил 1400px к предпоследней карте, карта будет перемещаться только на то количество места, которое у нее есть, пока не достигнет левой стороны границы оболочки.Но если вы прокрутите назад, все элементы выйдут за эту правую границу обертки.Демо (этот код плохо работает в этом редакторе): 

:root {
    --left: 60px;
}
body {
    margin: 0;
    padding: 0;
}
.wrapper {
    width: 1442px;
    border-right: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    overflow: scroll;
}
.wrapper, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
    position: sticky;
    height: 750px;
} 

.box1 {
    min-width: 357px;
    background-color: #1a1a1a;
    left: calc(var(--left) * 0);
}
.box2 {
    min-width: 357px;
    background-color: #333;
    left: calc(var(--left) * 1);
}
.box3 {
    min-width: 702px;
    background-color: #4d4d4d;
    left: calc(var(--left) * 2);
}
.box4 {
    min-width: 630px;
    background-color: #666;
    left: calc(var(--left) * 3);
}
.box5 {
    min-width: 630px;
    background-color: #808080;
    left: calc(var(--left) * 4);
}
.box6 {
    min-width: 357px;
    background-color: #999;
    left: calc(var(--left) * 5);
}
.box7 {
    min-width: 630px;
    background-color: #b3b3b3;
    left: calc(var(--left) * 6);
}
.box8 {
    min-width: 630px;
    background-color: #ccc;
    left: calc(var(--left) * 7);
}
<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div>
  <div class="box7"></div>
  <div class="box8"></div>
</div>
...