在jquery中向上/向下滚动区分？
我发现了一些很好的方法来检查滚动条使用jQuery的位置，但我想知道是否可以区分用户是否滚动或向下滚动？
检查最后的状态。 像这样的东西：
保留一个variables，比如last_scroll_position ，当你有一个滚动时，如果last_scroll_position - current_position > 0 ，用户向上滚动，如果滚动last_scroll_position - current_position > 0 ，则向下滚动。
<script type='text/javascript'> $(function(){ var CurrentScroll = 0; $(window).scroll(function(event){ var NextScroll = $(this).scrollTop(); if (NextScroll > CurrentScroll){ //write the codes related to down-ward scrolling here } else { //write the codes related to upward-scrolling here } CurrentScroll = NextScroll; //Updates current scroll position }); });
为了区分在jQuery中向上/向下滚动，你可以使用：
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x $('#yourDiv').bind(mousewheelevt, function(e){ var evt = window.event || e //equalize event object evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF if(delta > 0) { //scroll up } else{ //scroll down } });
这种方法也适用于有overflow:hidden div overflow:hidden 。
我成功地在FireFox，IE和Chrome中testing了它。
滚动事件
滚动事件在FF中performance奇怪（由于平滑滚动，它被激发很多次），但是它起作用。
注意：使用光标键或鼠标滚轮拖动滚动条时，实际上会触发 滚动事件。
//creates an element to print the scroll position $("<p id='test'>").appendTo("body").css({ padding: "5px 7px", background: "#e9e9e9", position: "fixed", bottom: "15px", left: "35px" }); //binds the "scroll" event $(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); if (scrollHeight - scrollTop === $self.innerHeight()) { console.log("► End of scroll"); } //saves the current scrollTop $self.data("lastScrollTop", scrollTop); });
车轮事件
你也可以看看MDN，它揭示了关于车轮事件的一个很好的信息。
注意：轮子事件只有在使用鼠标滚轮时才会触发 。 光标键和拖动滚动条不会触发事件。
我阅读文档和示例： 通过浏览器收听此事件
经过一些FF，IE浏览器，Chrome浏览器，Safari浏览器的testing后，我最终得到了这个片段：
//creates an element to print the scroll position $("<p id='test'>").appendTo("body").css({ padding: "5px 7px", background: "#e9e9e9", position: "fixed", bottom: "15px", left: "15px" }); //attach the "wheel" event if it is supported, otherwise "mousewheel" event is used $("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) { var evt = e.originalEvent || e; //this is what really matters var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari scrollText = ""; if (deltaY > 0) { scrollText = "<b>scroll down</b>"; } else { scrollText = "<b>scroll up</b>"; } //console.log("Event: ", evt); $("#test").html(scrollText + "<br>clientHeight: " + this.clientHeight + "<br>scrollHeight: " + this.scrollHeight + "<br>scrollTop: " + scrollTop + "<br>deltaY: " + deltaY); });
香草javascript示例：
var f = (function(){ var oldPos = window.scrollY; function fu(e) { var newPos = window.scrollY; if (newPos>oldPos) { console.log('down'); } else if(newPos<oldPos) { console.log('up'); } else { console.log('same'); } oldPos = newPos; } return fu; })(); window.addEventListener('scroll',f);
有一个简单的方法来做到这一点，没有任何forms的全局variables。 MouseWheel事件具有显式指定滚动方向的属性。 以下是如何使用它：
$("#scroll_div").bind("mousewheel",function(ev) { var curScrollLeft = $(this).scrollLeft(); $(this).scrollLeft(curScrollLeft + Math.round(ev.originalEvent.wheelDelta)); });
