Можно ли переопределить «переполнение: скрытые» родители с помощью «позиция: липкая»? - PullRequest
Новая
       38

Можно ли переопределить «переполнение: скрытые» родители с помощью «позиция: липкая»?

0 голосов
/ 12 июля 2019

У меня есть макет с двумя столбцами, где я хочу, чтобы правый столбец был position: sticky, чтобы он оставался в поле зрения при прокрутке более длинного левого столбца.

Это два столбца начальной загрузки, поэтому первое, что я должен был сделать, это удалить поплавки (и вместо этого использую display: inline-block).

Это прекрасно работает само по себе или в верхней части DOM этой конкретной страницы, но в отрендеренном месте (которое, увы, составляет около 30 или около того делений глубины ... не спрашивайте ... Я не могу заставить его работать. Обе колонки просто продолжают прокручиваться.

Я знаю, есть ли у родительского элемента свойство overflow, отличное от visible, которое может нарушить position: sticky, но здесь это не является проблемой. Может ли быть так, что если любой родительский элемент в цепочке имеет переполнение, это может нарушить липкое позиционирование?

Я просто уверен, что искать в этой ситуации, чтобы определить, что ломает его в этой ситуации. Есть ли другие ключевые вещи, на которые стоит обратить внимание, когда речь идет о липком позиционировании?

РЕДАКТИРОВАТЬ: я перефразировал свой вопрос, поскольку он определенно (после дальнейшего изучения и тестирования) определил, что проблема с родительским элементом в верхней части DOM была установлена ​​на overflow-x: hidden. Поскольку это общий код, мне придется выяснить причину этого и почему он там есть.

Но ... тем временем, есть ли какие-нибудь известные обходные пути к этому ... где можно использовать элемент ниже по дереву DOM в качестве содержащего элемента для элемента, расположенного закрепленным?

В приведенном ниже примере, если вы удалите переполнение из .theproblem, страница будет работать так, как я хочу (правый столбец «залипает» при прокрутке страницы). 

.theproblem {
  overflow-x: hidden;
}

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}
<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>

JSBin link

1 Ответ

1 голос
/ 12 июля 2019

Как вы уже заметили, любое свойство переполнения между закрепленной позицией и прокруткой нарушит его (объяснено здесь: Почему «position: sticky» не работает с Bootstrap CSS пользовательского интерфейса и здесь Чтоявляются "ползунками прокрутки"? ).

Один из обходных путей в вашем случае - переместить прокрутку на другой элемент и скрыть элемент по умолчанию: 

.theproblem {
  overflow-x: hidden;
}
/* Added this */
.columnwrapper {
  height:100vh;
  overflow:auto;
}
body {
  overflow:hidden;
  margin:0;
}
/**/

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}
<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>
...