與一個頁面導航的飛輪 - 滾動僅在部分的末尾

我有onepageNav腳本scrollTo頁面。頁面不是窗口的完整高度，比我在添加mousewhell時遇到了問題。與一個頁面導航的飛輪 - 滾動僅在部分的末尾

我有代碼：

  $('body').mousewheel(function(event, delta) { 
      if (flag) { return false; } 
      $current = $('section.current'); 

      if (delta > 0) { 
       $prev = $current.prev(); 

       if ($prev.length) { 
        flag = true; 
        $('body').scrollTo($prev, 1000, { 
         onAfter : function(){ 
          flag = false; 
         } 
        }); 
        $current.removeClass('current'); 
        $prev.addClass('current'); 
       } 
      } else { 
       $next = $current.next(); 

       if ($next.length) { 
        flag = true; 
        $('body').scrollTo($next, 1000, { 
         onAfter : function(){ 
          flag = false; 
         } 
        }); 
        $current.removeClass('current'); 
        $next.addClass('current'); 
       } 
      } 

      event.preventDefault(); 
     });

這對滾輪腳本。這是工作，但不是我想要的。如果我的第二部分比窗口大，那麼在滾動到下一部分之後，它會自動執行。我最後一節＃3，bigget比窗口，我滾動下滾動停止工作。

有人想過如何解決這個問題嗎？

來源

2013-12-20 Dominik Traskowski

這是很難說的東西沒有演示，但很明顯，您不會在任何地方檢查截面高度。我認爲你應該比較容器高度和部分高度，並且如果部分的高度大於容器的高度，則不防止滾動的默認值。 – Tony

我想到了這一點，但我不知道如何檢查節高。或我們現在的位置。我知道如何檢查某個部分的高度，但是我需要做什麼？ –

發佈您的HTML代碼，我們將能夠爲您提供更多幫助。 –

如果我理解正確的話，你可以使用下面的代碼：

HTML：

<section id='s1'></section> 
<section id='s2'></section> 
<section id='s3'></section> 
<section id='s4'></section>

JS：

function elementInViewport2(el) { 
    var top = el.offsetTop; 
    var left = el.offsetLeft; 
    var width = el.offsetWidth; 
    var height = el.offsetHeight; 

    while(el.offsetParent) { 
    el = el.offsetParent; 
    top += el.offsetTop; 
    left += el.offsetLeft; 
    } 

    return (
    top < (window.pageYOffset + window.innerHeight) && 
    left < (window.pageXOffset + window.innerWidth) && 
    (top + height) > window.pageYOffset && 
    (left + width) > window.pageXOffset 
); 
}; 

var current = $('section').first(); 
current.addClass('current'); 
var flag; 

$(window).scroll(function(event, delta) { 
    if (flag) { return false; } 

    var $body = $('body'), 
     $window = $(window), 
     newScroll = $body.scrollTop(); 

    if (!elementInViewport2(current[0])) { 
     current.removeClass('current'); 
     current[0] = null; 
    } 

    var newSection = $('section:not(.current)').filter(function(i, el) { 
     return elementInViewport2(el); 
    }).first(); 

    if (newSection[0] && current[0] != newSection[0]) { 
     current.removeClass('current'); 
     current = newSection; 
     newSection.addClass('current'); 
     flag = true; 
     $body.animate({scrollTop: newSection.offset().top}, function() { 
      flag = false; 
     }); 

     event.preventDefault(); 
    } 
});

Demo

來源

2013-12-20 03:03:10 Tony

與一個頁面導航的飛輪 - 滾動僅在部分的末尾

回答

相關問題