固定元件高度问题/滚动时在移动设备上跳转
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了固定元件高度问题/滚动时在移动设备上跳转相关的知识，希望对你有一定的参考价值。
当我滚动时，移动设备底部的固定元素有问题。每次滚动时，看起来高度都会重新计算，因为在移动设备上文档高度会增加。
我认为原因是地址栏淡出并且文档视口变大了。我进行了很多搜索，并尝试了不同的解决方案，例如将height: 100%设置为html和body，但没有成功。
这是GIF，表示我在chrome浏览器中在手机上滚动页面。顶部透明的是地址栏：
这是我的实际代码：
#wrapper {
position: fixed;
background: darkcyan;
color: #fff;
bottom: 0;
left: 0;
right: 0;
top: calc(100% - 100px);
width: 100%;
}
#bottom-element {
height: 50px;
position: fixed;
background: black;
display: block;
bottom: 0;
width: 100%;
left: 0;
right: 0;
}
#title {
text-align: center;
padding: 15px;
height: 20px;
border-bottom: 1px solid white;
}
#entries {
display: flex;
flex-direction: column;
overflow: scroll;
overflow-x: hidden;
}
.entry {
padding: 15px;
background: cadetblue;
}<div id="wrapper">
<div id="title"></div>
<div id="entries">
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
</div>
</div>
<div id="bottom-element"></div>想法是使div从屏幕的底部向上扩展到80%。那么，如何解决此问题？我正在动态更改最高值以扩展元素，因此，如果有任何可以保留我的布局的解决方案，将是不错的选择。
答案
问题是最高值是计算。我已经修改了您上一个问题的答案中的代码，以使其以不同的方式（总是以不同的方式实现同一件事）。
此示例使用高度动画而不是最高值。底部设置在包装器上，因此无论页面高度如何，它都会自行定位。然后在需要时根据需要调整高度]
const title = document.getElementById("title");
const wrapper = document.getElementById("wrapper");
title.addEventListener("click", () => {
wrapper.classList.toggle("expanded");
});#wrapper {
position: fixed;
background: gray;
color: #fff;
bottom: 42px;
left: 0;
right: 0;
border-radius: 12px 12px 0 0;
width: 100%;
transition: height 250ms ease-in-out;
height: 42px;
}
#wrapper.expanded {
height: 85vh;
}
#title {
text-align: center;
padding: 15px;
border-bottom: 1px solid white;
}
#notifications {
display: flex;
flex-direction: column;
overflow: scroll;
overflow-x: hidden;
}
.entry {
padding: 15px;
}<div id="wrapper">
<div id="title">Notifications</div>
<div id="notifications">
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
</div>
</div>以上是关于固定元件高度问题/滚动时在移动设备上跳转的主要内容，如果未能解决你的问题，请参考以下文章