javascript - Multiple scroll bars on the same page - Stack Overflow

I am interested in have multiple scroll bars on the same page....seen a couple of examples mainly on emerce 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.

I am interested in have multiple scroll bars on the same page....seen a couple of examples mainly on emerce 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.

• javascript
• performance
• scroll
• synchronize

Share Improve this question Follow asked Apr 30, 2014 at 12:49 ChrisChris 3311 silver badge44 bronze badges 3

• scrollbars? Don't you mean slideshows/Carousel? – epascarello Commented Apr 30, 2014 at 12:51
• scroll bars dont use javascript, they are added by the browser when a element is larger then its parent. (unless disabled by css). – atmd Commented Apr 30, 2014 at 12:52
• Not sure what you're asking for. Can you give a specific example of what you mean from the links you provided? – NDevox Commented Apr 30, 2014 at 12:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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>