Question

我有一个网页，由于某种原因只使用CSS和HTML，即使div低于页面它也不会让我向下滚动页面以查看其余的div和背景我试图通过删除固定来修复它部分背景但它仍然无法正常工作。

这是我的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是默认值（因此您不必自己列出），当元素边界之外有内容时会添加滚动条

Answer 2

如果您移除overflow和html标记上的body属性，则可以滚动。

通过在overflow和html标记上将body属性设置为“隐藏”，您说该页面不应滚动，即使下面有更多内容，这都被认为是溢出。

Answer 3

将overflow:auto添加到您的正文标记中。这应该可以解决您的问题。最近甚至我遇到了同样的问题，并用overflow-y:auto修复了它，这使你可以在网站的移动视图中垂直滚动

网页不滚动

3 个答案: