带有 ScrollOverflow 选项的 FullPage，当上面的表单部分需要从底部开始滚动时答案

【问题标题】：FullPage with ScrollOverflow Options, when coming form section above need to starts scrolling from bottom带有 ScrollOverflow 选项的 FullPage，当上面的表单部分需要从底部开始滚动时
【发布时间】：2016-11-17 20:57:53
【问题描述】：

我想知道是否有一种方法可以使用 FullPage 和更大部分的 Scrolloverflow 选项来完成某些事情。我有几个部分，其中一些是可滚动的；

如果我向下滚动部分，一切都按预期工作，自动滚动已打开，我从一个部分跳到另一个部分，并在一个部分较大时在一个部分内滚动。到现在为止还挺好！ :)
问题如下；
当我使用锚点或导航移动到最后一部分时，例如在 fullPage 呈现后。然后向上滚动回可滚动部分，它不会从底部显示整个部分，而是隐藏可滚动元素之外的一部分并从顶部开始该部分...
我希望基本上能够在我们使用锚点或导航跳转到可滚动部分下方的部分时，然后向上滚动，我们将从底部开始可滚动部分。

我试图从上面的部分使用 CSS3 强制滚动到底部，但问题是在此之后，当我向上滚动时它会跳转到上面的部分并且不会先滚动到部分的顶部，然后再滚动到顶部跳过上面的部分...

有什么建议吗？...希望有意义

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    navigationTooltips: ['one', 'two', 'three', 'four'],
    navigation: true,
    navigationPosition: 'right',
    fitToSection: false,
    scrollOverflow:true,
    onLeave: function(index, nextIndex, direction){
      if((nextIndex == 2) && (direction =='up')) {
        var scrollToBottom = $('.fp-scroller').height() - $(window).height();
        $('.fp-scroller').css({
          'transform' : 'translate(0px, -' + scrollToBottom + 'px) translateZ(0px)'
        });
      }
    },
});

JS FiDDLE

【问题讨论】：

您必须在afterRender 回调中处理它。正如the github topic you opened 中所建议的，您需要使用iScroll methods 来处理它。

标签： jquery fullpage.js iscroll

【解决方案1】：

感谢 Alvaro 在上述评论中的提示。我不得不使用 IScroll 方法，但在 afterLoad 回调中使用了它，并将 'fp-auto-height' 类添加到 'scrollable' 部分

http://jsfiddle.net/photous/qn084vmn/

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    navigationTooltips: ['one', 'two', 'three', 'four'],
    navigation: true,
    navigationPosition: 'right',
    fitToSection: false,
    scrollOverflow:true,
    afterLoad: function(anchorLink, index){
      var loadedSection = $(this);
      var nextSection = loadedSection.next();
      var prevSection = loadedSection.prev();
      if(nextSection.hasClass('fp-auto-height') ) {
        var IScroll = nextSection.find('.fp-scrollable').data('iscrollInstance');
        IScroll.scrollTo(0, 0, 0)
      }
      if(prevSection.hasClass('fp-auto-height') ) {
        var IScroll = prevSection.find('.fp-scrollable').data('iscrollInstance');
        IScroll.scrollTo(0, IScroll.maxScrollY, 0)
      }
}

});

【讨论】：