在阅读了很多关于我的问题的主题后,我仍然不知道如何解决它。
这是我目前面临的问题的 GIF:
https://s4.gifyu.com/images/20210302_235317.gif
正如我们所看到的,当我开始滚动页面时,浏览器的应用顶部栏(黑色部分)开始减少,这是意料之中的。但与此同时,底部开始出现一个浅蓝色块,这实际上是应用了背景颜色的页面主体。当我停止滚动(将手指从屏幕上移开)时,所有内容都会调整大小并显示正常。但这会导致发生“跳跃”,这很糟糕。
请注意,桌面上的一切都按预期运行,视口保持不变。当 background-attachment
不是 fixed
时,也不会发生这种跳转。
这是我的代码:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="styles/css/normalize.css" rel="stylesheet">
<style>
body {
background-color: powderblue;
padding: 0;
margin: 0;
overflow: scroll;
width: 100vw;
height: 100vh;
}
.box {
min-height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.one {
background-image: url("https://www.lesoir.be/sites/default/files/dpistyles_v2/ena_16_9_extra_big/2020/01/22/node_274673/27378739/public/2020/01/22/B9722319434Z.1_20200122153715_000+GOLFBQVE6.2-0.jpg?itok=SglXj3C31579704194");
border: 3px solid green;
}
.two {
background-image: url("https://cdn.shopify.com/s/files/1/0064/7400/6618/articles/Sans_titre_2000x.png?v=1559840071");
border: 3px solid #8fd19e;
}
.three {
background-image: url("https://www.visitflanders.com/fr/binaries/45b1b488-84d1-47ed-a063-4484b5922992_tcm21-132651.jpg");
border: 3px solid #ba8b00;
}
</style>
</head>
<body>
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</body>
</html>