Как я могу получить содержащий блок «фиксированного» позиционного элемента с javascript? - PullRequest
Новая
       26

Как я могу получить содержащий блок «фиксированного» позиционного элемента с javascript?

1 голос
/ 20 марта 2020

Допустим, у нас есть следующие настройки: 

#header {
    background-color: #ddd;
    padding: 2rem;
}
#containing-block {
    background-color: #eef;
    padding: 2rem;
    height: 70px;
    transform: translate(0, 0);
}
#button {
    position: fixed;
    top: 50px;
}
<div id="header">header</div>
<div id="containing-block">
    containing-block
    <div>
      <div>
        <div>
          <button id="button" onclick="console.log('offsetParent', this.offsetParent)">click me</button>
        </div>
      </div>
    </div>
</div>

, где кнопка имеет позицию fixed, а содержащий элемент имеет свойство transform.

Это может произойти как неожиданность, но кнопка расположена относительно #containing-block, а не области просмотра (как и следовало ожидать при использовании fixed). Это потому, что элемент #containing-block имеет набор свойств transform. См. https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed для уточнения.

Есть ли простой способ выяснить, какой блок содержит кнопку? Какой элемент top: 50px рассчитывается по отношению к? Предположим, у вас нет ссылки на содержащий блок, и вы не знаете, как много уровней. Это может быть даже documentElement, если нет предков с установленными свойствами transform, perspective или filter.

Для absolute или relative позиционированных элементов, у нас есть elem.offsetParent, который дает нам эту ссылку. Однако для fixed элементов оно установлено равным нулю.

Конечно, я мог бы найти dom и найти первый элемент со свойством стиля transform, perspective или filter набор, но это кажется хакерским и не будущее.

Спасибо!

...