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

Я создаю веб-сайт, используя stellar.js для эффектов параллакса и niceScroll.js для плавной прокрутки. Теперь я не уверен, что является причиной проблемы, но я не могу прокрутить по горизонтали или вертикали, для вертикальной прокрутки я явно указал свойство высоты "body" на 500%, а для "html" его значение установлено на 100%. Но, очевидно, я не могу использовать этот обходной путь для свойства width. Любое решение?

Примечание. Если я удалю инициализацию nicescroll из моего js-файла, я не смогу прокрутить в любом направлении, независимо от того, на сколько я установил ширину и высоту.

Вот основная структура HTML:

<html>
  <body>
  <div class="main">
    <div class="slide" data-slide="1" data-stellar-background-ratio="0.2">
      <div id="slide-1">content</div>
    </div>
    <div class="slide" data-slide="1" data-stellar-background-ratio="0.2">
      <div id="slide-2">content</div>
    </div>
  </div>
  </body> 
</html>

И CSS:

html{
font-family: 'Montserrat', sans-serif;
width:auto;
height:100%;

}
body{
font-family: 'Montserrat', sans-serif;
width:auto;
height:500%;

}
.slide{
background-attachment:fixed;
width:100%;
height:100vh;
position:relative;

 }

.main{

height:100vh;
}
#slide1{
width:100%;
height:100%;
background: url(../imgs/bkg-home-1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;    
}

И JS:

$(document).ready(function() {
$("html").niceScroll();  // Initializing the nicescroll for the whole document
$('.main').stellar();
});

Что я должен делать? Это такая нормальная функция, и я нахожу это действительно раздражающим.

Источник

1 ответ

Вы можете использовать.scrollIntoView() для этого. Это принесет определенный элемент в область просмотра.

Пример:

document.getElementById( 'bottom' ).scrollIntoView();`
Источник
Другие вопросы по тегам