Question

我有以下结构：

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

谢谢。

Answer 1

此代码段使用JQuery的scroll方法（还有一个类似的问题：Differentiate between scroll up/down in jquery?）

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我建议您使用fullPage.js来节省时间，可以获得更好的结果。不要重新发明轮子。

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

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

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

如果你使用fullPage.js，你只需要7Kb gzip就可以获得所有这些。

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

2 个答案: