问题描述
这是我目前面临的问题的 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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)