jQuery: Getting a multi-directional scroll effect to work on mobile

Question

I'm making a fairly simple effect that involves a page divided into two halves, a .left-container and a .right-container. It is designed so that, as the user scrolls down the page, the content of the left container scrolls up in typical fashion, the content of the right container scrolls down. I did this by placing the right container in a fixed position, assigning it an initial top property of -61%, and then applying a bit of code in order to have said right container "scroll" in the opposite direction of the rest of the page, in sync with it (specifically, by adding the window's current scrolltop value to the right container's initially negative top position). Here's the relevant code:

HTML:

      <div class="wrapper">


                 <div class="left-container">

                              <!-- content here -->

                 </div> <!-- .left-container -->


                 <div class="right-container">

                               <!-- content here -->

                 </div> <!-- .right-container -->


        <div> <!-- .wrapper -->

CSS:

html, body {
      width:100%;
      height:100%;
}

.wrapper {
      width:100%;
      height:100%;
}

.left-container,
.right-container {
      width:50%;
      height:160%;
}

.right-container {
      left:50%;
      top:-61%;
      position:fixed;
}

SCRIPT:

$(document).ready(function () {

 var rHeight = $(".wrapper").height();
 var tHeight = rHeight * -0.61;


  $(window).scroll(function(){
    var sTop = $(this).scrollTop(); 

        $('.right-container').css('top', tHeight + sTop);
    });

});

And HERE is the page in question. In somewhat rough condition, but the scrolling effect I was looking for is achieved.

The issue is, this code as it is doesn't perform well on mobile, I think because the .scroll() event fires only after touch has been fully executed. So the right container doesn't scroll smoothly, but rather stays fixed until the user lifts their finger, at which point the right container simply snaps into its final position.

I'm wondering if there is an effective way to adapt the bit of jquery above (or something similar) into a more mobile-friendly variation? Maybe an alternative to .scroll()? I believe a plugin like ScrollMagic/ SuperScrollerama or iScroll might contain a mobile-optimized solution with a similar end result, but if possible it be great to achieve the effect on mobile devices without using the plugins, since it already works well as is on desktop. Thanks in advance for any suggestions, advice, or ideas you might have!

Answer 1

I created a plugin with a very similar functionality some days ago. The plugin is multiScroll.js and creates a page divided in two vertical panels with opposite moves on scrolling.

• Demo site
• Github repository
• Blog entry

It works on touch devices as well as and old browsers such as IE 8.