4

我正在开发一个 Ionic 4 应用程序，我遇到了一个奇怪的问题，即他们.scroll-content班级内的固定位置页脚。我可以在没有 Ionic 的情况下重现这个，所以我在更一般的意义上问这个问题：

我有一个容器元素（在我的例子中由 Ionic 提供），它具有：

.scroll-content {
    overflow-y: scroll; 
    position: absolute;
    contain: layout size style;
}

加上一些顶部/底部/左侧/右侧值来定位它，它们不会影响问题。

里面有比这个容器高的内容，导致容器滚动，还有一个我用position: fixed.

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>

现在我想假设 Ionic 添加这个类是有目的的，所以我不想覆盖它。破坏position: fixed行为是预期的吗？如果是这样，我该怎么做才能解决它并再次修复我的页脚？

4

0 回答 0