我使用的是 Chromebook，但无法在我的网页上滚动。我没有任何其他设备可以对其进行测试，所以可能只有 Chromebook。我的代码如下。单击问题所在的联系我按钮。您可能需要在编辑器中复制和粘贴代码，因为 SO 上的预览很小。
function contact_anim() {
$('#links-div').fadeOut('slow', function() {
$("#contact-form").fadeIn();
});
}
function cancel_contact_anim() {
$('#contact-form').fadeOut('slow', function() {
$('#links-div').fadeIn();
});
}body {
background-image: url('amsterdam1920x1080.jpg');
background-size: auto;
margin: 0;
padding: 0;
font-family: Arial;
text-align: center;
color: white;
background-attachment: fixed;
}
#main {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(252, 0, 0, 0.67);
}
#links-div {
margin: 50px;
}
.links {
text-decoration: none;
color: white;
font-weight: bold;
border: 8px solid white;
padding: 13px;
font-size: 22px;
display: block;
border-radius: 50px;
width: 170px;
margin: 0 auto;
}
h1 {
font-size: 50px;
}
p {
font-size: 27px;
}
.links:hover {
background-color: white;
}
input[type="text"], #msg {
width: 50%;
margin: 15px;
height: 40px;
resize: none;
border: none;
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
outline: none;
font-size: 20px;
}
#msg {
height: 225px;
}
#contact-form {
width: 50%;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>j0rdan.me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<h1>j0rdan.me</h1>
<p>This site is currently in the making, but<br>feel free to take a look around</p>
<div id="links-div">
<a href="#" id="about" class="links">ABOUT ME</a><br/><br/>
<a href="#" id="contact" class="links" onclick="contact_anim()">CONTACT ME</a><br/><br/>
<a href="#" id="projects" class="links">MY PROJECTS</a><br/><br/>
</div>
<form id="contact-form" action="contact.php" method="post" style="display: none">
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<textarea id="msg"></textarea><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<button type="submit" id="send" name="send">Send</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="animation_handlers.js" charset="utf-8"></script>
</body>
</html>最佳答案
您需要将 overflow-y: scroll 添加到您的 #main 规则中。 fixed 位置使其不可滚动:
function contact_anim() {
$('#links-div').fadeOut('slow', function() {
$("#contact-form").fadeIn();
});
}
function cancel_contact_anim() {
$('#contact-form').fadeOut('slow', function() {
$('#links-div').fadeIn();
});
}body {
background-image: url('amsterdam1920x1080.jpg');
background-size: auto;
margin: 0;
padding: 0;
font-family: Arial;
text-align: center;
color: white;
background-attachment: fixed;
}
#main {
width: 100%;
height: 100%;
position: fixed;
overflow-y: scroll;
background-color: rgba(252, 0, 0, 0.67);
}
#links-div {
margin: 50px;
}
.links {
text-decoration: none;
color: white;
font-weight: bold;
border: 8px solid white;
padding: 13px;
font-size: 22px;
display: block;
border-radius: 50px;
width: 170px;
margin: 0 auto;
}
h1 {
font-size: 50px;
}
p {
font-size: 27px;
}
.links:hover {
background-color: white;
}
input[type="text"], #msg {
width: 50%;
margin: 15px;
height: 40px;
resize: none;
border: none;
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
outline: none;
font-size: 20px;
}
#msg {
height: 225px;
}
#contact-form {
width: 50%;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>j0rdan.me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<h1>j0rdan.me</h1>
<p>This site is currently in the making, but<br>feel free to take a look around</p>
<div id="links-div">
<a href="#" id="about" class="links">ABOUT ME</a><br/><br/>
<a href="#" id="contact" class="links" onclick="contact_anim()">CONTACT ME</a><br/><br/>
<a href="#" id="projects" class="links">MY PROJECTS</a><br/><br/>
</div>
<form id="contact-form" action="contact.php" method="post" style="display: none">
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="email" placeholder="Email"><br/>
<textarea id="msg"></textarea><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<button type="submit" id="send" name="send">Send</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="animation_handlers.js" charset="utf-8"></script>
</body>
</html>关于javascript - 为什么我不能在我的网页上滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45829073/