같은 페이지에 여러 개의 스크롤 막대가 있습니다.

Question

같은 페이지에 여러 개의 스크롤 막대가 있습니다. www.jrew와 www.indexi.se와 같은 전자 상거래 상점을 중심으로 몇 가지 예제를 보았습니다. 가장 좋은 방법은 자바 스크립트를 구조에 대한 아이디어? 또한 스크롤 막대가 동기화되도록, 이상적으로는 같은 속도로 시간을 맞추기를 원합니다.

Answer 1

overflow: scroll 또는 overflow-y: scroll을 사용하여 스크롤 할 수있는 컨테이너를 만들 수 있습니다. 일반적인 접근법은 컨테이너의 높이를 고정하여 스크롤되도록하는 것입니다. 예 :

.scroll { 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; /* enables momentum-scrolling on iOS */ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

스크롤하는보기를 여러 컨테이너로 분할하려면 다음과 같이하십시오. 정상적인 그리드 레이아웃과 내포 된 스크롤 div를 넣습니다. 예 :

<div class="row row-6"> 
    <div class="scroll"> 
     your left content 
    </div> 
</div> 

<div class="row row-6"> 
    <div class="scroll"> 
     your right content 
    </div> 
</div> 

자신의 스크롤 컨테이너를 만드는 것은 큰 복잡한 응용 프로그램을 만들 때 사용자가 건너 올 것이다 다른 모바일 장치에서 가장자리의 경우 부작용이있을 수 있다는 것을 알고 있어야합니다. 가변 높이를 가진 스크롤 영역 위에 콘텐츠가 있으면 상황이 까다로워집니다 (고정 된 위쪽 막대는 괜찮습니다).

스크롤 div는 자신을 컨테이너 크기로 수정합니다. 그리드 열은 높이 100 % 또는 고정 또는 절대 위치를 사용하여 페이지 하단까지 늘어납니다.