Веб-страница не прокручивается

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 «s обычно занимает всю область просмотра (или окошко) и все, что за пределами окна считаются переполнением, так как у вас есть overflow:hidden, браузер скрывает содержимое вне окна просмотра

Удаления overflow:hidden должно работать, потому что overflow:auto значение по умолчанию (поэтому вы не должны перечислить его самостоятельно), который добавляет полосы прокрутки, когда есть содержание вне границ элемента

Answer 2

Если вы удалите overflow свойство на ваши html и body тегов, вы будете возможность прокрутки.

Установив overflow свойство «скрытый» на html и body тегов, вы говорите, что страница не прокручивать, хотя гораздо больше содержания ниже, все это считается переполнение.

Answer 3

Добавить overflow:auto в ваш тег тела. Это должно решить вашу проблему. В последнее время даже у меня была такая же проблема, и я исправил ее с помощью overflow-y:auto, которые позволяют прокручивать по вертикали в мобильном виде на сайте