Я работаю над приложением Ionic 4, и у меня возникла странная проблема с нижним колонтитулом с фиксированной позицией внутри класса .scroll-content
. Я мог бы воспроизвести это без Ionic, поэтому я задаю вопрос в более общем смысле:
У меня есть элемент контейнера (предоставленный Ionic в моем случае), который имеет:
.scroll-content {
overflow-y: scroll;
position: absolute;
contain: layout size style;
}
Плюс некоторые верхние / нижние / левые / правые значения для позиционирования, они не влияют на проблему.
Внутри него есть содержимое, которое выше этого контейнера, в результате чего контейнер прокручивается, и нижний колонтитул, который я сделал липким с position: fixed
.
Однако нижний колонтитул не ведет себя так, как будто он вообще липкий, если я не удаляю значение "layout" из свойства contain
.
let layout = true;
const container = document.querySelector('.scroll-content');
document.getElementById('toggleLayout').addEventListener('click', (e) => {
layout = !layout;
if(layout) container.style.contain = 'size style layout';
else container.style.contain = 'size style';
e.target.innerHTML = `layout: ${layout}`;
});
.scroll-content {
contain: layout size style;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
overflow-y: scroll;
}
li {
border-bottom: 1px solid #ddd;
list-style: none;
padding: 10px;
}
footer {
background: #eee;
bottom: 0;
padding: 20px;
position: fixed;
width: 100%;
}
<div class="scroll-content">
<button id="toggleLayout">layout: true</button>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
<li>p</li>
<li>o</li>
<li>q</li>
<li>r</li>
<li>s</li>
</ul>
<footer>Footer</footer>
</div>
Пока я хотел бы предположить, что Ионик добавил этот класс с целью, поэтому я предпочитаю не переопределять его. Ожидается ли нарушенное поведение position: fixed
? Если так, что я могу сделать, чтобы обойти это и снова исправить мой нижний колонтитул?