Multiple scroll bars on the same page

Question

I am interested in have multiple scroll bars on the same page....seen a couple of examples mainly on ecommerce stores like www.jrew and www.indumenti.se ,does any one have any ideas on the best way to structure the java script? I also want to time the scroll bars to be synchronise also, ideally at the same speed.

Answer 1

You can make any container scrollable with overflow: scroll or overflow-y: scroll. The general approach is to fix the height of these containers so they scroll. E.g.

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

To split the scrolling views into multiple containers you would make e.g. a grid layout like normal and put a nested scrolling div inside. e.g.

<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>