为什么我不能在HTML文档中向下滚动？ [英] Why can't I scroll down in my HTML document?
本文介绍了为什么我不能在HTML文档中向下滚动？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
出于某种原因，当我的HTML溢出时，我无法向下滚动。请帮忙。谢谢。这是我的代码。
For some reason I can't scroll down when my HTML overflows. Please help. Thanks. Here is my code.
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
</head>
<style>
/* Initial body */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
color: white;
background-color: black;
}
/* Basic styling */
.jumbotron {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
background-color: #FFA500;
}
.icon-menu i {
margin-right: 5px;
}
</style>
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<h3 style="color: white;">BACK</h2>
</div>
<!-- Menu -->
<ul>
<li><a href="#">Scouts</a></li>
<li><a href="#">Duty Rooster</a></li>
<li><a href="#">Meal Plan</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<br>
<h1 style="background-color: #FFA500; color: white;"> ☰ Scout Logs</h1>
<br>
</div>
<a href="SCOUT ONE URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 1
</button>
</a><a href="SCOUT TWO URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 2
</button>
</a><a href="SCOUT THREE URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 3
</button>
</a><a href="SCOUT FOUR URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 4
</button>
</a><a href="SCOUT FIVE URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 5
</button>
</a><a href="SCOUT SIX URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 6
</button>
</a><a href="SCOUT SEVEN URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 7
</button>
</a><a href="SCOUT EIGHT URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 8
</button>
</a><a href="SCOUT NINE URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 9
</button>
</a><a href="SCOUT TEN URL">
<button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
Scout 10
</button>
</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
<script>
var main = function() {
/* Push the body and the nav over by 285px over */
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
$(document).ready(main);
</script>
</body>
</html>
推荐答案
（' 。icon-menu'）。点击（ function （） {
('.icon-menu').click(function() {
（' 。menu'）。animate（{剩余
： 0px
}， 200 ）;
('.menu').animate({ left: "0px" }, 200);
（' body'）。animate（{
left：285px
}， 200 ）;
}）;
/ * 然后将它们推回去* /
('body').animate({ left: "285px" }, 200); }); /* Then push them back */
这篇关于为什么我不能在HTML文档中向下滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
