JQuery：ScrollTo到達當前div結束後的鼠標滾輪的下一個div

我試圖從有點像頁面的divs構建網站。因此，有多個div的高度爲100％的瀏覽器窗口在彼此之上。我正在嘗試使導航工作，以便用戶可以使用鼠標滾輪滾動到下一個div。我發現這個有用的代碼段：JQuery：ScrollTo到達當前div結束後的鼠標滾輪的下一個div

http://jsfiddle.net/Mottie/Vk7gB/

$('#nav').onePageNav(); 



var $current, flag = false; 

$('body').mousewheel(function(event, delta) { 
    if (flag) { return false; } 
    $current = $('div.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(); 
});

但是你可以看到有一個問題，當含量比瀏覽器窗口更長。我希望它的工作，以便如果當前div比瀏覽器窗口滾動更長的時間正常工作，但它應該停止在div的底部，然後下一次滾動到下一個div。有什麼辦法可以做到這一點嗎？

我希望，這有一定的道理..

感謝，

-Mikkå

來源

2013-04-07 Mikkå

只是一個評論，我會發現，作爲一個用戶令人難以置信的煩人。永遠不要劫持用戶控件，使他們的行爲不應該在我看來。 – 2013-04-07 15:21:26

通常我同意你的看法，但這一次整個概念將會比普通網站更有點意義。我想對用戶體驗有更多的控制。但是，謝謝，仍然。 – 2013-04-07 15:56:16

http://jsfiddle.net/Vk7gB/261/

不是最終解決方案，但它會把你在正確的道路上。

$('#nav').onePageNav(); 

var $current, flag = false, b = $('body'); 

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

var $next; 
if (delta > 0) $next = $current.prev(); 
else $next = $current.next(); 

var scrollTop = b.scrollTop(); 
var elHeight = $current.height(); 
var nextOffset = $next.offset().top; 
var avHeight = screen.availHeight; 

console.log(scrollTop, nextOffset, elHeight, avHeight); 
if(scrollTop + elHeight - avHeight < nextOffset){ 
    return true; 
} 

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

event.preventDefault(); 
return false; 
});

來源

2013-12-02 17:53:57 rafaelcastrocouto

在此 article

你可以找到類似的解決方案，我更喜歡使用的是不是你的想法

您可以定義部分，我建議你如果有可能使您的網頁適合瀏覽器獨裁

this是GitHub的JS庫，你可以用它

this是一個在線演示的是清澈透明的，你

來源

2016-10-02 09:58:46

JQuery：ScrollTo到達當前div結束後的鼠標滾輪的下一個div

回答

相關問題