Javascript 在占据全高的页面中显示向下滚动效果上的div_Javascript_Jquery_Scroll_Touchpad

Javascript 在占据全高的页面中显示向下滚动效果上的div

javascript jquery scroll

Javascript 在占据全高的页面中显示向下滚动效果上的div,javascript,jquery,scroll,touchpad,Javascript,Jquery,Scroll,Touchpad,我的结构如下： <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: non

我的结构如下：

<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，如果检测到第二个向下滚动事件，我需要显示第三个div，隐藏第二个div。我的问题是：触摸板上的一个向下滚动可能会触发多个事件，从而立即显示第二个div和第三个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;
                            });

如何检测向下滚动事件、停止滚动事件并显示第二个div。然后检测另一个向下滚动事件、停止滚动事件并隐藏第二个div和显示第三个div

此外，之后，我检测到向上滚动事件，停止滚动事件并隐藏第三个div和显示第二个div。然后检测另一个向上滚动事件，停止滚动事件并隐藏第二个div

多谢各位

此代码段使用JQuery方法还有一个类似的问题：

$window.scroll函数{ var target=e.currentTarget， $self=$target， scrollTop=window.pageYOffset | | target.scrollTop， lastScrollTop=$self.datalastScrollTop | | 0， scrollHeight=target.scrollHeight | | document.body.scrollHeight，滚动文本=；如果scrollTop>lastScrollTop{ 滚动文本=向下滚动； }否则{ 滚动文本=向上滚动； } $.test.htmlscrollText+ innerHeight:+$self.innerHeight+ 滚动高度：+scrollHeight+ scrollTop:+scrollTop+ lastScrollTop:+lastScrollTop+ +滚动文本；如果scrollHeight-scrollTop==$self.innerHeight{ console.log► 结束+滚动文本； } //保存当前的滚动条 $self.datalastScrollTop，scrollTop； }; 第一组{ 身高：100%； } 第二组，第三组{ 显示：无； } .测试{ 保证金：200px自动200px自动； } 滚动信息

我会鼓励你使用，以节省时间，并有一个更好的结果。不要重新发明轮子

它是目前此类网站使用最多的插件。适用于现代和老式浏览器、触摸设备，对苹果笔记本电脑中的动态滚动有很好的响应。它处理URL哈希、返回链接、锚定链接、调整大小

大量可配置的选项、方法和回调

经过数千人在不同设备和浏览器上的高度测试Windows Phone、Adroid、iOS、触摸屏电脑、Opera、Safari。。。与触摸设备的兼容性。与动态滚动苹果笔记本电脑、魔术鼠标的兼容性。。。。与旧浏览器IE 8、Opera 12的兼容性。。。。适用于现代浏览器和触摸设备css3的良好性能。调整视口大小时重新计算剖面和幻灯片。返回URL中的锚。响应模式。辅助功能包括键盘、滚动条、浏览器历史记录。使用回调触发操作。有很多方法和选择。

如果你使用fullPage.js，只需7Kb的压缩就可以得到所有这些信息。

嗨，我不明白如何用它来解决我的问题。如果scrollTop>lastScrollTop{scrollText=scroll down；}或者{scrollText=scroll up；}，则单个触摸板向下滚动事件将使此代码运行多次。。。。因此，同时显示我的第二个和第三个div。。。当发生向下滚动事件时，我想首先显示第二个div，当生成新的滚动事件时显示第三个div。。。。对于当前的代码，我似乎无法理解如何将向下滚动限制为显示一个div而不是两个div…您尝试过库吗？