我有一個標題浮動框，當您向下捲動頁面時，該浮動框就會消失。工作正常，只是在我的 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> 
我已經為這個問題苦苦掙扎了一段時間，所以這是我發現的：
問題是，在 iOS 上，頁面會在頂部和底部邊緣反彈，因此 window.pageYOffset 值可能為負值並且大於實際頁面高度。因此
prevScrollpos >= currentScrollPos條件是不夠的。一種解決方案是透過向 html 元素新增
overscroll-behavior: none;來停用反彈效果。正確的解決方案是將條件擴展到邊緣情況：
const maxScrollHeight = document.body.scrollHeight - window.innerHeight; if (prevScrollpos >= currentScrollPos && currentScrollPos 0) { // Prevent hiding header on top overscroll document.getElementById("main-header").style.top = "-8rem"; }