2014-11-07 6 views
1

여러 개의 이미지 행 (가로 스크롤이있는 이미지)이있는 간단한 페이지를 만들려고합니다 (Nicescroll 3 사용).Nicescroll 3 - 가로 스크롤이 끝난 후 세로 스크롤이 끝납니다.

마우스를 사용하면 행의 가로 스크롤이 끝나면 마우스 휠이 작동하지 않습니다. 내가 원했던 것은 수평 스크롤이 끝난 후에 페이지가 수직 스크롤링을 계속했다는 것입니다.

내 코드 :

HTML :

<div id="main-content"> 
    <div class="row"> 
     <div class="square-container"> 
      <div class="square"></div> 
     </div> 
     <!-- several other square-container divs --> 
     <div class="square-container"> 
      <div class="square"></div> 
     </div> 
    </div> 
    <div class="row"> 
     <!-- several other square-container divs --> 
    </div> 
    <!-- several other rows --> 
    </div> 
</div> 

CSS :

#main-content{ 
    min-height: 100%; 
    height: auto; 
} 
#main-content > .row { 
    overflow-x:scroll; 
    overflow-y:hidden; 
    white-space:nowrap; 
}  
.square-container { 
    float:none; 
    display:inline-block; 
    margin: 20px 30px 5px 30px; 
} 
.square{ 
    height: 100px; 
    width: 100px; 
    border: 1px solid black; 
} 

가 여기에 의견을 내 Fiddle

답변