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.


Demo

Code Contains

  • Javascript

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;

lsContainer.style.top = -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;

ev.stopPropagation();

var deltaY = ev.deltaY;

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

newTop = 0;

} else if( newTop < maxScrollPos) {

newTop = maxScrollPos;

}
lsContainer.style.top = newTop+"px";

rightContainer.scrollTop = -(newTop);

}

 

Demo

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

You may also like