1

我有一个网页由于某种原因仅使用 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;
}

非常感谢任何帮助。

4

4 回答 4

6

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

然后将其添加回来，但仅在您实际希望隐藏溢出的部分上。

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

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

于 2013-11-06T23:12:24.623 回答
0

如果您删除您的和标签overflow上的属性，您将能够滚动。htmlbody

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

于 2013-11-06T23:21:46.983 回答
0

添加overflow:auto到您的身体标签。这应该可以解决您的问题。最近，即使我遇到了同样的问题并修复了它，overflow-y:auto它允许您在网站的移动视图中垂直滚动

于 2015-07-14T07:15:51.250 回答
0

这里有两种情况

  1. 如果您使用隐藏在主体标签的主 div 中的溢出，那么这可能是它的原因。

解决方案 ：remove overflow: hidden, specially overflow-y : hidden from main div or body

  1. 如果您使用滚动条宽度为 0，高度为 0，那么这也会产生同样的问题，或者您需要强制滚动

解决方案 ：you can either give width greater than 0 and if you want scrollbar hidden but scrolling functionality then you can use like this 

::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    display: none;
}

于 2021-09-20T08:18:11.710 回答