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。