时间戳

首页 > 解决方案 > 在嵌套部分的航点上向前和向后更改滚动方向

javascript - 在嵌套部分的航点上向前和向后更改滚动方向

问题描述

我有一个单页应用程序，其中包含嵌套的部分。

带有巢的主要任性部分 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/

标签： javascriptjqueryscroll

解决方案

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

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

推荐阅读