Почему установка `overflow-x: hidden` в` html` заставляет дочерний элемент `position: sticky` вести себя по-другому? - PullRequest
Новая
       9

Почему установка `overflow-x: hidden` в` html` заставляет дочерний элемент `position: sticky` вести себя по-другому?

0 голосов
/ 05 декабря 2018

Следующие два примера идентичны, за исключением того, что первый пример применяет overflow-x: hidden только к body, а второй пример применяет его к обоим html, body.

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

Это работает, как и ожидалось: 

body {
  margin: 0;
  overflow-x: hidden;
}

p.sticky {
  position: sticky;
  top: 0;
  color: red;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p class="sticky">foo</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>

Но это не так: 

html, body {
  margin: 0;
  overflow-x: hidden;
}

p.sticky {
  position: sticky;
  top: 0;
  color: red;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p class="sticky">foo</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius magnam odio quidem nisi? Dolorum voluptatibus voluptas dignissimos cupiditate vel voluptates ducimus ullam, cumque vitae. Doloribus quasi eaque consequuntur voluptatibus sunt!</p>

1 Ответ

0 голосов
/ 06 декабря 2018

Вот что CSS-позиционирование может сказать о position:sticky

6.2.Липкое позиционирование

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

Итак, вот в чем дело: что является ближайшим предком с ползунком прокрутки, в отличие от того, какой блок прокручивается вертикальной полосой прокрутки?

Чтобы понять это, нам нужноучитывать переполнение распространения. Спецификация переполнения CSS гласит:

3.4.Распространение области просмотра переполнения

UA должны применять значения overflow- *, установленные для корневого элемента, к области просмотра.Однако, когда корневой элемент является HTML-элементом [HTML] (включая синтаксис XML для HTML), значение переполнения которого видно (по обеим осям), и этот элемент имеет дочерний элемент body, вместо этого пользовательские агенты должны применять переполнение.* значения первого такого дочернего элемента в окне просмотра.Элемент, из которого передается значение, должен затем иметь используемое значение переполнения видимого.

Таким образом, в первом случае 

body {
  margin: 0;
  overflow-x: hidden;
}

свойства переполнения элемента bodyраспространяется в окно просмотра.Из-за этого распространения не существует элемента-предка p.sticky, имеющего поле прокрутки, поэтому липкое смещение вычисляется относительно области просмотра.Окно просмотра также является полем, которое прокручивается вертикальной полосой прокрутки.

Во втором случае 

html, body {
  margin: 0;
  overflow-x: hidden;
}

это свойства переполнения элемента html, которые распространяются в область просмотра, иэлемент body сохраняет свои указанные свойства переполнения, устанавливая поле прокрутки, которое является предком p.sticky.Затем смещение вычисляется относительно элемента body.Но это не элемент body, над которым работает вертикальная полоса прокрутки, это все еще окно просмотра.

Так что p.sticky не движется относительно элемента тела, и когда все это движется, p.sticky не за что застрять.

...