gpt4 book ai didi

html - 页面不滚动 HTML CSS

转载 作者:行者123 更新时间:2023-11-27 22:59:37 25 4
gpt4 key购买 nike


我只是在玩弄 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com