顯示DIV佔據整個高度

我有以下結構：顯示DIV佔據整個高度

<body> 
    <div id="first-div"> 
     <div id="second-div"></div> 
     <div id="third-div"></div> 
    </div> 
</body> 

#first-div { 
     height: 100%; 
} 
#second-div, #third-div { 
    display: none; 
}

當檢測到第一向下滾動事件中，我需要的＃第二div來顯示，如果第二個向下滾動事件被檢測到，我需要顯示＃third-div和隱藏＃second-div。我的問題是：在觸摸板上向下滾動可能會觸發多個事件，因此會立即顯示＃second-div和＃third-div。

$(body).on('DOMMouseScroll mousewheel', function (event) { 
           if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) { 
            //scroll down 
            console.log('Down'); 
           } else { 
            //scroll up 
            console.log('Up'); 
           } 
           //prevent page fom scrolling 
           return false; 
          });

如何檢測向下滾動事件，停止滾動事件並顯示＃second-div。然後檢測另一個向下滾動事件，停止滾動事件並隱藏＃second-div並顯示＃third-div？

另外，之後，我檢測向上滾動事件，停止滾動事件並隱藏＃third-div和show＃second-div。然後檢測另一個向上滾動事件，停止滾動事件並隱藏＃second-div？

謝謝。

來源

2015-05-30 perpetual_dream

您是否試過[fullPage.js]（http://alvarotrigo.com/fullPage/）庫？ – Alvaro

這個片段用了jQuery 的scroll方法（有一個類似的問題：Differentiate between scroll up/down in jquery?）

$(window).scroll(function(e) { 
 
    var target = e.currentTarget, 
 
    $self = $(target), 
 
    scrollTop = window.pageYOffset || target.scrollTop, 
 
    lastScrollTop = $self.data("lastScrollTop") || 0, 
 
    scrollHeight = target.scrollHeight || document.body.scrollHeight, 
 
    scrollText = ""; 
 

 
    if (scrollTop > lastScrollTop) { 
 
    scrollText = "<b>scroll down</b>"; 
 
    } else { 
 
    scrollText = "<b>scroll up</b>"; 
 
    } 
 

 
    $(".test").html(scrollText + 
 
    "<br>innerHeight: " + $self.innerHeight() + 
 
    "<br>scrollHeight: " + scrollHeight + 
 
    "<br>scrollTop: " + scrollTop + 
 
    "<br>lastScrollTop: " + lastScrollTop + 
 
    "<br>" + scrollText); 
 

 
    if (scrollHeight - scrollTop === $self.innerHeight()) { 
 
    console.log("► End of " + scrollText); 
 
    } 
 

 
    //saves the current scrollTop 
 
    $self.data("lastScrollTop", scrollTop); 
 
});

#first-div { 
 
    height: 100%; 
 
} 
 
#second-div, 
 
#third-div { 
 
    display: none; 
 
} 
 
.test { 
 
    margin: 200px auto 200px auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="first-div"> 
 
    <div class="test"> 
 
    scroll info</div> 
 
</div> 
 
<div id="second-div"> 
 
    <div class="test"></div> 
 
</div> 
 
<div id="third-div"> 
 
    <div class="test"></div> 
 
</div>

來源

2015-05-30 12:58:49 user2314737

嗨，我不明白我該如何使用它來解決我的問題。如果（scrollTop> lastScrollTop）scrollText =「向下滾動」，單個觸摸板向下滾動事件將使此代碼運行多次。 }其他{ scrollText =「向上滾動」; } ....因此同時顯示我的第二個和第三個div ...當發生向下滾動事件時，我想先顯示＃second-div，並且當生成新的滾動事件時顯示third-div .... with目前的代碼我似乎無法理解如何限制向下滾動顯示一個div而不是兩個... –

我會鼓勵你使用fullPage.js，以節省時間和有一個更好的結果。不要重新發明車輪。

它是目前這種網站最常用的插件。適用於現代和舊版瀏覽器，觸摸設備，並對蘋果筆記本電腦中的動態滾動有很好的響應。它處理URL哈希，返回鏈接（錨鏈接），調整大小...

大量的可配置選項，方法和回調。

高度在不同的設備和瀏覽器的數千人測試（Windows手機，的Adroid，iOS設備，觸摸屏電腦，歌劇，Safari ...）
使用觸摸設備的兼容性。
兼容性動態滾動（蘋果筆記本電腦，魔術鼠標...）。
與舊版瀏覽器（IE 8，Opera 12 ...）的兼容性。
現代瀏覽器和觸摸設備（css3）的良好性能。
調整視口大小時重新計算節和幻燈片。
返回URL中的錨點。
響應模式。
輔助功能（鍵盤，滾動條，瀏覽器歷史記錄）。
使用回調來觸發動作。
大量的方法和選項。

如果您使用的是fullPage.js，那麼只需要7KB的壓縮文件即可獲得所有這一切。

來源

2015-06-01 10:01:49 Alvaro

顯示DIV佔據整個高度

回答

相關問題