Question

我正在建立一个网站，使用stellar.js进行视差效果，使用niceScroll.js进行平滑滚动。现在我不确定导致问题的是什么，但是我不能水平或垂直滚动，为了垂直滚动我明确指定了＆＃34; body＆＃34;的高度属性。到500％和＆＃34; html＆＃34;它设定为100％。但显然我不能将此解决方法用于width属性。任何解决方案？

注意：如果我从js文件中删除nicescroll的初始化，无论我设置宽度和高度多少，我都无法向任何方向滚动。

这是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();
});

我该怎么办？这是一个正常的功能，我发现这真的很烦人。

Answer 1

您可以使用.scrollIntoView（）。它会将一个特定元素带入视口。

示例：

document.getElementById( 'bottom' ).scrollIntoView();`

网页不滚动

1 个答案: