网页不滚动 [英] Webpage not scrolling

问题描述

我有一个网页，只使用CSS和HTML的某些原因，即使div在页面下，它不会让我向下滚动页面看到的其余的div和背景ive尝试通过删除固定部分关闭背景，但它仍然不工作。

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.

以下是我的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;
}

任何帮助非常感激。

推荐答案

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

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

这是因为 overflow 被认为是元素尺寸之外的任何东西。给定 body 的维度通常占用整个视口（或查看窗口），并且窗口外的一切都被视为溢出，因为您有溢出：隐藏

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

删除 overflow：hidden 应该工作，因为 overflow：auto 是默认值（因此你不必自己列出），当元素的边界之外有内容时，它添加一个滚动条

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

这篇关于网页不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！