Webpage not scrolling | 易学教程

问题

I have a webpage that uses only CSS and HTML for some reason even though the div is below the page it wont let me scroll the page down to see the rest of the div and background ive tried to fix it by removing the fixed part off the background but it still doesn't work.

Here is my 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;
}

Any help greatly appreciated.

回答1:

Remove overflow:hidden; from each section. Test it to make sure you can scroll

Then add it back but only on the sections where you actually want the overflow to be hidden

This is because overflow is considered as anything outside of the element's dimensions. Given body's dimensions generally takes up the whole viewport (or viewing window) and everything outside of the window is considered overflow, since you have overflow:hidden, the browser hides the content outside of the viewport

Removing overflow:hidden should work because overflow:auto is the default value (therefore you don't have to list it yourself), which adds a scrollbar when there is content outside of the element's bounds

回答2:

If you remove the overflow properties on your html and body tags, you will be able to scroll.

By setting the overflow property to "hidden" on the html and body tags, you are saying that the page shouldn't scroll, even though there is much more content below, it's all considered overflow.

回答3:

Add overflow:auto to your body tag. This should solve your problem. Recently even i had the same problem and fixed it with overflow-y:auto which allow you to scroll vertically in mobile view of the site

来源：https://stackoverflow.com/questions/19824821/webpage-not-scrolling

标签

html

css

overflow