Question

我有一个单页应用程序，该应用程序具有嵌套的部分。

带有巢的主要任性部分 https://jsfiddle.net/zfLp7d6m/3/

因此，当用户点击幻灯片2时，我希望暂停垂直滚动，并让下一张幻灯片水平滚动至幻灯片3，然后再滚动4，然后再恢复垂直滚动。

如果用户后退-则暂停是在其按幻灯片4，然后3，然后2-然后恢复垂直滚动的情况下

      var $nested = $('.nested');
      var $win = $(window);

      $nested.waypoint(function(direction) {
        console.log("direction", direction);

      if (direction == 'down') {
          console.log("pause and slide right");
          //scroll width -- pause vertical scroll and scroll right - end slide
        //$dipper.addClass("js-dipper-animate");
        } else {
          console.log("pause and slide left");
            //scroll width - pause vertical scroll and scroll left - start slide
        //$dipper.removeClass("js-dipper-animate");
        }
      }, {
        offset: '50%'
      });


$(window).scroll(function () {
    ///any use for this function?    
});

其他示例 https://jsfiddle.net/64Lzc1pg/1/

水平滚动 https://jsfiddle.net/5gf6envz/1/

Answer 1

您可以使用https://alvarotrigo.com/fullPage/

如果您想自己做，则需要捕获鼠标滚轮事件，阻止浏览器滚动，然后使用scrollBy和/或scrollTop滚动幻灯片的高度（您可以可以通过以下方式获得高度：Math.max(document.documentElement.clientHeight, window.innerHeight || 0)）。这样，您将面临很多极端情况和跨平台问题，因此我建议使用其他方法。

在嵌套截面的航点上前后更改滚动方向

1 个答案: