我有一个标题浮动框，当您向下滚动页面时，该浮动框就会消失。工作正常，只是在我的 iPad 上不行。
当我向上滚动页面时，导航菜单会按预期显示，但一旦我放开页面，它就会再次消失。当页面到达底部时它也会出现
<!doctype html>
<html>
<head>
<title>Our Funky HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<style>
.main-header {
width: 100%;
position: fixed;
top: 0;
background-color: #ffff00;
padding: 0.5rem 2.0rem 0.5rem 1.9rem;
height: 7.0rem;
z-index: 50;
display: flex;
margin: auto;
align-items: center;
justify-content: space-between;
transition: top 0.4s; /* Transition effect when sliding down (and up) */
}
.content {
width: 100%;
background-color: #ff0000;
height: 2000px;
}
</style>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
// if ( ( (prevScrollpos > currentScrollPos) || ( currentScrollPos < 50 ) ) ){
if ( ( (prevScrollpos >= currentScrollPos) ) ){
document.getElementById("main-header").style.top = "0rem";
} else {
document.getElementById("main-header").style.top = "-8rem"; // "-70px";
}
prevScrollpos = currentScrollPos;
}
</script>
</head>
<body>
<div class="main-header" id="main-header"></div>
<div class="content" ></div>
</body>
</html>
该网站是用 vuejs 完成的
相关部分：
<!doctype html>
<html>
<head>
<title>Our Funky HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<style>
.main-header {
width: 100%;
position: fixed;
top: 0;
background-color: #ffff00;
padding: 0.5rem 2.0rem 0.5rem 1.9rem;
height: 7.0rem;
z-index: 50;
display: flex;
margin: auto;
align-items: center;
justify-content: space-between;
transition: top 0.4s; /* Transition effect when sliding down (and up) */
}
.content {
width: 100%;
background-color: #ff0000;
height: 2000px;
}
</style>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
// if ( ( (prevScrollpos > currentScrollPos) || ( currentScrollPos < 50 ) ) ){
if ( ( (prevScrollpos >= currentScrollPos) ) ){
document.getElementById("main-header").style.top = "0rem";
} else {
document.getElementById("main-header").style.top = "-8rem";
}
prevScrollpos = currentScrollPos;
}
</script>
</head>
<body>
<div class="main-header" id="main-header">
</div>
<div class="content" >
</div>
</body>
</html>
P粉7528128532024-03-22 21:16:27
我已经为这个问题苦苦挣扎了一段时间，所以这是我发现的：
问题是，在 iOS 上，页面会在顶部和底部边缘反弹，因此 window.pageYOffset 值可能为负值并且大于实际页面高度。因此 prevScrollpos >= currentScrollPos 条件是不够的。
一种解决方案是通过向 html 元素添加 overscroll-behavior: none; 来禁用反弹效果。
正确的解决方案是将条件扩展到边缘情况：
const maxScrollHeight = document.body.scrollHeight - window.innerHeight;
if (prevScrollpos >= currentScrollPos && currentScrollPos < maxScrollHeight) { // Prevent hiding header on bottom overscroll
document.getElementById("main-header").style.top = "0rem";
} else if (currentScrollPos > 0) { // Prevent hiding header on top overscroll
document.getElementById("main-header").style.top = "-8rem";
}