jQuery：在手机上获得多向滚动效果

我正在制作一个相当简单的效果，将页面分成两部分，一个

.left容器

和一个

.right容器

。它的设计使得，当用户向下滚动页面时，左侧容器的内容以典型方式向上滚动，右侧容器的内容向下滚动。为此，我将正确的容器放置在一个固定位置，为其分配一个初始的

top

属性-61%，然后应用一点代码，以便使所述正确的容器与页面其余部分的相反方向“滚动”，并与之同步（特别是，将窗口的当前scrolltop值添加到右侧容器最初的负顶部位置）。以下是相关代码：

HTML:

      <div class="wrapper">


                 <div class="left-container">

                              <!-- content here -->

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


                 <div class="right-container">

                               <!-- content here -->

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


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

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

});

脚本：

      <div class="wrapper">


                 <div class="left-container">

                              <!-- content here -->

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


                 <div class="right-container">

                               <!-- content here -->

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


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

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

});

而就是问题所在的页面。虽然条件有些粗糙，但我想要的滚动效果已经实现了

问题是，这段代码在手机上的表现并不好，我认为这是因为

.scroll（）

事件只有在触摸完全执行后才会触发。因此，正确的容器不会平滑滚动，而是在用户抬起手指之前保持固定，此时正确的容器会简单地卡入其最终位置

---

我想知道是否有一种有效的方法可以将上面的jquery（或类似的东西）改编成一种更适合移动的变体？也许是

.scroll（）的替代方案

？我相信类似插件或iScroll可能包含一个最终结果类似的移动优化解决方案，但如果可能的话，不使用插件就可以在移动设备上实现这种效果，因为它已经可以在桌面上正常工作了。提前感谢您提供的任何建议、建议或想法！

我创建了一个插件几天前，在中使用了非常类似的功能。 该插件可以创建一个页面，分为两个垂直面板，滚动时移动方向相反

它适用于触摸设备以及IE 8等旧浏览器

太好了！谢谢你，阿尔瓦罗。（如果可以的话，我会投票的！）