网页无法滚动

Question

我有一个出于某种原因仅使用CSS和HTML的网页，即使div在页面下方，它也不允许我向下滚动页面以查看div的其余部分，而背景ive试图通过移除固定部分来修复它。背景，但仍然无法正常工作。

这是我的CSS

h1 {
  font-family: 'Bowlby One SC', cursive;
  color:#ffffff;
}
html {
  background: url(http://images4.alphacoders.com/282/282476.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow:hidden;
}
body {
    margin:0 !important;
    padding:0 !important;
    overflow:hidden;
}
#navbar {
  background-color:#333333;
  width:100%;
  height:22px;
  text-align:left;
  padding-left:5px;
  padding-bottom:20px;
}
.fadein {
  position:absolute;
  top:40px;
  margin:auto;
  height:250px;
  width:100%;
  overflow:hidden;
  z-index:1;
}
.fadein:hover {
  opacity:1;
}
.fadein img {
  position:absolute;
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  max-width:100%;
}

@-webkit-keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}    
#f1 {
  background-color: lightblue;        
}
#f1:hover {
  cursor:pointer;
}
#f2 {
  -webkit-animation-delay: -4s;
}
#f2:hover
{
  cursor:pointer;
}
#f3 {
  -webkit-animation-delay: -2s;
}
#f3:hover {
  cursor:pointer;
}
#circle {
  width: 200px;
  height: 100%; 
  background-color:#000000;
  width: 60%; margin: 0px auto;
  position:relative;
  text-align:center;
}
#top10 {
  font-size:300%;
  display:block;
  background-color:#333333;
  box-shadow
}
.imagepreview {
  height:200px;
  width: 60%; margin: 0px auto;
  position:relative;
  overflow:hidden;
  -moz-transition: width 0.5s ease-out;
  -webkit-transition: width 0.5s ease-out;
  transition: width 0.5s ease-out;
}
.imagepreview img {
  max-width:100%;
}
p {
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;
}
.imagepreview:hover {
  width:70% !important;
  -moz-transition: width 0.5s ease-out;
  -webkit-transition: width 0.5s ease-out;
  transition: width 0.5s ease-out;
}

任何帮助，不胜感激。

Answer 1

overflow:hidden;从每个部分中删除。测试它以确保您可以滚动

然后将其重新添加，但只添加到您真正希望隐藏溢出的部分上

这是因为overflow被认为是元素尺寸之外的任何东西。给定body的尺寸通常占据整个视口（或查看窗口），并且窗口外的所有内容都被视为溢出，因为您拥有overflow:hidden，浏览器会将内容隐藏在视口之外

删除overflow:hidden应该起作用，因为overflow:auto它是默认值（因此您不必自己列出它），当内容超出元素范围时，它将添加滚动条