在占满高度的页面中显示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;
}

在检测到第一个向下滚动事件时，我需要显示#second-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和显示#second-div。然后检测另一个向上滚动事件，停止滚动事件并隐藏#second-div?

谢谢。

这个代码片段使用了JQuery的scroll方法(有一个类似的问题:区分在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>

我鼓励你使用fullPage.js来节省时间和有一个更好的结果。不要重新发明轮子。

它是目前这类网站最常用的插件。适用于现代和旧的浏览器，触摸设备，并对苹果笔记本电脑的动态滚动有很好的响应。它处理URL哈希值，返回链接(锚链接)，调整大小…

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

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

如果你使用fullpage。js你就可以得到7Kb的gzip

相关内容

最新更新

热门标签：