显示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占据整个高度

回答

相关问题