我正在建立一个网站,使用 stellar.js 实现视差效果,使用 niceScroll.js 实现平滑滚动。现在我不确定是什么导致了问题,但我无法水平或垂直滚动,对于垂直滚动,我明确指定“body”的高度属性为 500%,而“html”的设置为 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();
});
我应该怎么办?它是如此正常的功能,我发现这真的很烦人。