I am interested in have multiple scroll bars on the same page....seen a couple of examples mainly on ecommerce stores like and ,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.
1 Answer
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>
