我只是在玩弄 HTML 和 CSS，但无论如何我都无法让该页面向下滚动。唯一对我有用的是将 HTML 页面缩放到 x<1.0。我想将 div 放在一个 block 中，一个 div 应该占用 100vh。
下面附上 HTML 和 CSS 代码:
* {
margin: 0;
padding: 0;
}
html {
transition: 1.3s all ease-in-out;
width: 100%;
height: 100%;
display: flex;
overflow-x: hidden;
overflow-y: scroll;
}
body {
position: absolute;
display: block;
height: auto;
}
.lev1 {
width: 100%;
height: 90vh;
background: url('res/bg1.png');
background-size: cover;
}
.lev2 {
width: 100%;
height: 90vh;
background-color: red;
background-size: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Danish Shakeel</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<!--Progress Bar-->
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction()
};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
<body>
<div class="lev1">
Level1
</div>
<div class="lev2">
Level2
</div>
</body>
</html>最佳答案
它对我来说滚动得很好，这可能表明它不适用于特定的浏览器。您的 HTML 格式不正确，无论如何都需要修复以消除这不是问题所在。
当 HTML 应位于
内部时，您却在 外部。还有，这段 html<!--Progress Bar-->
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
缺少一个
</div>
关于html - 页面不滚动 HTML CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59070378/