Follow us on - Dribbble | Twitter | Facebook

Parallel scrolling

Parallel Scrolling

In this tutorial, we have to see about parallel scrolling using javascript. What is parallel scrolling and where I used? For my prototyping tool, need this requirement of the parallel scrolling in timeline section. In the timeline, the section has two subsections left panel, right panel. the left panel has a list of elements with CSS properties, the right panel contains duration, easing, delay for each CSS property. If left panel scrolled, then need to scroll right panel automatically and vice-versa. Let see the simple script used in parallel scrolling.


Code Contains

  • Javascript


Two container – left container, right container. Initialize scroll and wheel events to two containers.

leftContainer.addEventListener("wheel", leftContainerScroll, false);
rightContainer.addEventListener("scroll", rightContainerScroll, false);


In right container bound scroll event. on scrolling, apply scroll top of the right container to the left container as the top position.

function rightContainerScroll(){

var scrollTopPos = rightContainer.scrollTop; = -scrollTopPos+"px";


In left container bound wheel event. on the mouse wheel, we get deltaY value and offsetTop of the left container.Calculate new top value by  leftContainerTop – deltaY;

Now apply new top value for the right container as scroll top and for the left container as position top.

function leftContainerScroll(ev){

var leftContainerTop = lsContainer.offsetTop;


var deltaY = ev.deltaY;

var newTop = leftContainerTop - deltaY;
if( newTop > 0 ) {

newTop = 0;

} else if( newTop < maxScrollPos) {

newTop = maxScrollPos;

} = newTop+"px";

rightContainer.scrollTop = -(newTop);




Thank you for reading this tutorial, and if you have any question or related work to show, please do. ?

You may also like