0
我建立了一個網站,使用stellar.js視差效果和niceScroll.js平滑滾動。 現在我不確定是什麼導致了問題,但我不能水平或垂直滾動,對於垂直滾動,我明確指定「body」的height屬性爲500%,「html」將其設置爲100%。 但顯然我不能使用這個解決方法的寬度屬性。 任何解決方案?網頁不滾動
注意:如果我從我的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();
});
我該怎麼辦?它的這樣一個正常的功能,我覺得這真的很煩人。