jQuery：在移动设备上获得多向滚动效果

Question

我正在制作一个相当简单的效果，将页面分为两半，.left-container 和.right-container。它被设计成当用户向下滚动页面时，左侧容器的内容以典型方式向上滚动，右侧容器的内容向下滚动。我通过将正确的容器放置在一个固定的位置来做到这一点，为其分配一个初始的top 属性为-61%，然后应用一些代码以使正确的容器在与其余容器相反的方向上“滚动”页面，与之同步（具体来说，通过将窗口的当前滚动顶部值添加到右容器的初始负顶部位置）。以下是相关代码：

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;
}

脚本：

$(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);
    });

});

HERE 是有问题的页面。条件有点粗糙，但达到了我想要的滚动效果。

问题是，这段代码在移动设备上表现不佳，我认为是因为.scroll() 事件仅在触摸完全执行后才会触发。因此，右侧容器不会平滑滚动，而是保持固定状态，直到用户抬起手指，此时右侧容器会卡入其最终位置。

我想知道是否有一种有效的方法可以将上面的 jquery（或类似的东西）调整为更适合移动设备的变体？也许可以替代.scroll()？我相信像 ScrollMagic/ SuperScrollerama 或 iScroll 这样的插件可能包含一个针对移动设备优化的解决方案，具有类似的最终结果，但如果可能的话，在不使用插件的情况下在移动设备上实现效果会很好，因为它已经像在桌面上一样运行良好.提前感谢您提出的任何建议、意见或想法！

Answer 1

几天前我创建了一个功能非常相似的插件。 该插件是multiScroll.js，它创建了一个页面，该页面分为两个垂直面板，滚动时具有相反的移动。

• Demo site
• Github repository
• Blog entry

它适用于触摸设备以及旧浏览器，例如 IE 8。