2016-11-17 28 views
1

더 큰 섹션의 Scrolloverflow 옵션을 사용하여 FullPage를 사용하여 뭔가를 수행 할 수있는 방법이 있는지 궁금합니다. 나는 몇 개의 섹션을 가지고 있으며 그 중 일부는 스크롤 할 수있다.FullPage with ScrollOverflow Options, 폼 섹션을 올릴 때 하단에서 스크롤 시작

섹션을 아래로 스크롤하면 모든 것이 예상대로 작동하고, autoScrolling이 켜져 있고, 섹션에서 섹션으로 이동하고 섹션이 더 큰 섹션에서 스크롤합니다. 여태까지는 그런대로 잘됐다! :)
문제는 다음과 같습니다.
예를 들어 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

+0

당신은 그것을 처리해야거야 IScroll 방법을 사용하지만, 후 부하 콜백에 그것을 사용하고 '스크롤'섹션에 'FP-자동 높이'클래스를 추가했다 'afterRender' 콜백에서. [열어 본 github 주제] (https://github.com/alvarotrigo/fullPage.js/issues/2417)에서 제안 된대로 [iScroll 메소드] (http://iscrolljs.com/)를 사용해야합니다.) 그것을 처리합니다. – Alvaro

답변

2

감사합니다 그. 나는

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

});