Что такое «скролл боксы»? - PullRequest
Новая
       14

Что такое «скролл боксы»?

2 голосов
/ 09 апреля 2019

В модуле Позиционированный макет CSS Уровень 3 (Рабочий проект) в главе 6.2.Липкое позиционирование у нас есть это определение: (выделение мое)

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

Что это за скроллеры?

Далее по документусуществует проблема с термином scrolling boxes

проблема 6 Позиционное позиционирование действительно должно определяться в терминах ближайшего прокручиваемого предка, но в настоящее время такого термина в другом месте не определенов CSS.CSSOM View относится к «полям прокрутки».Переполнение CSS еще не вытянуло соответствующий текст из CSS Box, а CSS Box имеет старое, запутанное определение «корня потока», которое почти (но, вероятно, не совсем) то, что мы хотим здесь.Эта спецификация относится к «потоку корня», поскольку в настоящее время это где-то ближе всего, но это не оптимально.

Кто-нибудь знает, где я могу найти дополнительную информацию (этот проект от мая 2016 г.)?Я особенно хочу включить или выключить, если поле является ползунком прокрутки или нет.

1 Ответ

3 голосов
/ 09 апреля 2019

Как сказал @alex, поле прокрутки - это поле, в котором значение переполнения установлено на значение, отличное от visible (значение по умолчанию).Я не могу подтвердить, но я пришел к выводу, основываясь на этом предыдущем ответе , где переполнение создает некоторые проблемы с липким элементом.

Как я объяснил там, если у вас есть элемент с overflow:hidden в качествепредок position:sticky, этот перестанет работать, потому что его смещение будет рассчитываться на основе этого поля (с overflow:hidden), потому что это ближайший предок с ползунком прокрутки .Так как мы использовали hidden, мы не можем прокручивать это поле, поэтому мы не можем видеть липкое поведение.

Вот базовый пример: 

.wrapper {
  height:200vh;
  border:2px solid;
}
.wrapper >div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}
<div class="wrapper">
  <div></div>
</div>

В приведенном ниже примере область просмотра будет использоваться для ссылки, поскольку у нас нет поля прокрутки.Теперь давайте добавим переполнение в оболочку: 

.wrapper {
  height:200vh;
  border:2px solid;
  overflow:scroll;
}
.wrapper >div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}
<div class="wrapper">
  <div></div>
</div>

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

Если вы добавите переполнение, добавив еще один элемент внутрь, мы можем запустить липкое поведение: 

.wrapper {
  height:200vh;
  border:2px solid;
  overflow:scroll;
  position:relative;
}
.wrapper >div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}

.wrapper > span {
  position:absolute;
  top:100%;
  height:50px;
  left:0;
  right:0;
  background:blue;
}
<div class="wrapper">
  <div></div>
  <span></span>
</div>

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

Учитывая последнюю проблему в спецификации, мы также можем прочитать, что:

Липкое позиционирование действительно должно бытьопределяется в терминах ближайшего прокручиваемого предка , но в настоящее время такого термина в CSS нет.CSSOM View относится к «полям прокрутки».

Так что, вероятно, прокручиваемый предок такой же, как предок с полем прокрутки .

...