Question

我做了一个相当简单的效果，涉及分为两半的页面，.left-container和.right-container。它的设计使得当用户向下滚动页面时，左容器的内容以典型的方式向上滚动，右容器的内容向下滚动。我通过将正确的容器放在一个固定的位置，为它分配一个-61％的初始top属性，然后应用一些代码以便拥有正确的容器＆＃34;滚动＆＃34;在与页面其余部分相反的方向上，与其同步（具体地，通过将窗口的当前滚动值添加到右侧容器的最初负顶部位置）。这是相关代码：

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

});

HERE 是相关网页。在稍微粗糙的情况下，但我正在寻找的滚动效果已经实现。

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

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

Answer 1

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

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

enter image description here

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

1 个答案: