2014-09-19 86 views
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(); 
}); 

我該怎麼辦?它的這樣一個正常的功能,我覺得這真的很煩人。

回答

0

您可以使用.scrollIntoView()。它將在視口中引入特定元素。

實施例:

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