0

我有以下结构：

<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？

谢谢你。

4

2 回答 2

0

这个片段使用了JQuery 的滚动方法（有一个类似的问题：Different 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-30T12:58:49.987 回答
0

我鼓励您使用fullPage.js来节省时间并获得更好的结果。不要重新发明轮子。

它是目前此类网站最常用的插件。适用于现代和旧浏览器、触摸设备，并且对 Apple 笔记本电脑中的动态滚动有良好的响应。它处理 URL 哈希、返回链接（锚链接）、调整大小......

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

  • 数千人在不同的设备和浏览器中进行了高度测试（Windows Phone、Adroid、iOS、触摸屏计算机、Opera、Safari...）
  • 与触控设备的兼容性。
  • 与动态滚动（Apple 笔记本电脑、魔术鼠标...）的兼容性。
  • 与旧浏览器（IE 8、Opera 12...）的兼容性。
  • 现代浏览器和触摸设备（css3）的良好性能。
  • 调整视口大小时重新计算部分和幻灯片。
  • 在 URL 中返回锚点。
  • 响应模式。
  • 辅助功能（键盘、滚动条、浏览器历史记录）。
  • 使用回调来触发动作。
  • 很多方法和选项。

如果您使用 fullPage.js，您只需 7Kb 的 gzip 即可获得所有这些。

于 2015-06-01T10:01:49.260 回答