我尝试了“隐藏的”溢出属性，但它完全删除了滚动功能；以及将 first_block 固定到位。当溢出属性处于“滚动”状态时，所有的 div 都是可见的。
html{
overflow: hidden;
}
body{
height: 100%;
width: 100%
overflow-x: hidden;
overflow-y: auto;
}
div#container{
height: 100%;
}
div#static_nav{
text-align: right;
}
div#block_one{
height: 100vh;
}
div#block_two{
height: 100vh:
}
这是HTML
这里显示了 first_block div 内容，但每个单独的 div 应该是 100vh(来自 css)。我不太确定如何解决这个问题。
<head>
<link rel = "stylesheet" type = "text/css" href = "tof_css.css" />
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?
family=Kanit|Heebo|Source+Sans+Pro">
</head>
<body>
<div id = "container">
<header>
<div id = "static_nav">
<nav class = "navbar">
<a href = "block_one">HOME</a>
<a href = "block_two">ABOUT</a>
<a href = "block_four">PEOPLE</a>
<a href = "block_five">CONTACT</a>
<a href = "">LOG IN</a>
</nav>
</div>
</header>
<div id = "block_one">
test 1
</div>
<div id = "block_two">
test 2
</div>
<div id = "block_three">
test 3
</div>
<div id = "block_four">
test 4
</div>
<div id = "block_five">
test
</div>
</div>
</body>
最佳答案
你在 CSS 的最后一行有错误，你有冒号 : 而不是分号 ;
顺便说一句，保持简单
JSfiddle:jsfiddle.net/pg0tpg05
body {
margin: 0; /* remove default margin */
}
div#static_nav {
text-align: right;
}
#container > div {
height: 100vh;
}<div id="container">
<header>
<div id="static_nav">
<nav class="navbar">
<a href="block_one">HOME</a>
<a href="block_two">ABOUT</a>
<a href="block_four">PEOPLE</a>
<a href="block_five">CONTACT</a>
<a href="">LOG IN</a>
</nav>
</div>
</header>
<div id="block_one">
test 1
</div>
<div id="block_two">
test 2
</div>
<div id="block_three">
test 3
</div>
<div id="block_four">
test 4
</div>
<div id="block_five">
test
</div>
</div>关于html - 如何在保持滚动功能的同时消除整个窗口的滚动弹跳？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41322269/