ฉันกำลังมองหาบางสิ่งบางอย่างกับผลกระทบนี้:
$(window).scroll(function(event){
if (/* magic code*/ ){
// upscroll code
} else {
// downscroll code
}
});
ความคิดใด ๆ
ฉันกำลังมองหาบางสิ่งบางอย่างกับผลกระทบนี้:
$(window).scroll(function(event){
if (/* magic code*/ ){
// upscroll code
} else {
// downscroll code
}
});
ความคิดใด ๆ
คำตอบ:
ตรวจสอบกระแสscrollTop
เทียบกับก่อนหน้าscrollTop
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
lastScrollTop
ที่ 0 หรือจะเริ่มต้นได้อย่างถูกต้องหรือไม่?
var lastScrollTop = $(window).scrollTop()
หลังจากที่เบราว์เซอร์อัปเดตตำแหน่งการเลื่อนเมื่อโหลดหน้าเว็บ
คุณสามารถทำได้โดยไม่ต้องติดตามส่วนบนสุดก่อนหน้าเนื่องจากตัวอย่างอื่น ๆ ต้องการ:
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('Scroll up');
}
else {
console.log('Scroll down');
}
});
ฉันไม่ได้เป็นผู้เชี่ยวชาญในเรื่องนี้ดังนั้นโปรดค้นคว้าเพิ่มเติม แต่ดูเหมือนว่าเมื่อคุณใช้งาน$(element).scroll
กิจกรรมที่ฟังอยู่นั้นเป็นเหตุการณ์ 'เลื่อน'
แต่ถ้าคุณรับฟังmousewheel
เหตุการณ์โดยเฉพาะโดยใช้การผูกoriginalEvent
แอตทริบิวต์ของพารามิเตอร์เหตุการณ์ที่โทรกลับของคุณมีข้อมูลที่แตกต่างกัน ส่วนหนึ่งของข้อมูลนั้นคือwheelDelta
เป็นส่วนหนึ่งของข้อมูลที่มีถ้ามันเป็นบวกคุณขยับเมาส์วีลขึ้น ถ้ามันเป็นลบคุณก็เลื่อนเมาส์วีลลง
ฉันเดาว่าmousewheel
เหตุการณ์จะเกิดขึ้นเมื่อล้อของเมาส์หมุนแม้ว่าหน้าเว็บจะไม่เลื่อน กรณีที่เหตุการณ์ 'เลื่อน' อาจไม่ถูกไล่ออก หากคุณต้องการคุณสามารถโทรevent.preventDefault()
ที่ด้านล่างของการเรียกกลับเพื่อป้องกันไม่ให้หน้าเลื่อนและเพื่อให้คุณสามารถใช้เหตุการณ์ล้อเลื่อนของสิ่งอื่นนอกเหนือจากการเลื่อนหน้าเช่นฟังก์ชันการซูมบางประเภท
scrollTop
ก็ไม่ได้อัปเดต ในความเป็นจริง$(window).scroll()
ไม่ได้ยิงเลย
เก็บตำแหน่งการเลื่อนก่อนหน้านี้จากนั้นดูว่าตำแหน่งใหม่นั้นใหญ่กว่าหรือน้อยกว่านั้น
นี่คือวิธีหลีกเลี่ยงตัวแปรทั่วโลก ( ซอที่มีอยู่ที่นี่ ):
(function () {
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
alert('down');
} else {
alert('up');
}
previousScroll = currentScroll;
});
}()); //run this anonymous function immediately
อาจมีวิธีแก้ปัญหา 3 ข้อจากการโพสต์นี้และคำตอบอื่น ๆคำตอบอื่น
โซลูชันที่ 1
var lastScrollTop = 0;
$(window).on('scroll', function() {
st = $(this).scrollTop();
if(st < lastScrollTop) {
console.log('up 1');
}
else {
console.log('down 1');
}
lastScrollTop = st;
});
โซลูชันที่ 2
$('body').on('DOMMouseScroll', function(e){
if(e.originalEvent.detail < 0) {
console.log('up 2');
}
else {
console.log('down 2');
}
});
โซลูชัน 3
$('body').on('mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0) {
console.log('up 3');
}
else {
console.log('down 3');
}
});
ฉันไม่สามารถทดสอบกับ Safari ได้
chrome 42 (Win 7)
Firefox 37 (Win 7)
IE 11 (Win 8)
IE 10 (Win 7)
IE 9 (Win 7)
IE 8 (Win 7)
ฉันตรวจสอบว่าผลข้างเคียงจาก IE 11 และ IE 8 นั้นมาจาก
if else
คำสั่ง ดังนั้นฉันจึงแทนที่ด้วยif else if
คำสั่งดังต่อไปนี้
จากการทดสอบหลายเบราว์เซอร์ฉันตัดสินใจใช้โซลูชัน 3สำหรับเบราว์เซอร์ทั่วไปและโซลูชันที่ 1สำหรับ firefox และ IE 11
ฉันส่งคำตอบนี้เพื่อตรวจสอบ IE 11
// Detect IE version
var iev=0;
var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
var trident = !!navigator.userAgent.match(/Trident\/7.0/);
var rv=navigator.userAgent.indexOf("rv:11.0");
if (ieold) iev=new Number(RegExp.$1);
if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
if (trident&&rv!=-1) iev=11;
// Firefox or IE 11
if(typeof InstallTrigger !== 'undefined' || iev == 11) {
var lastScrollTop = 0;
$(window).on('scroll', function() {
st = $(this).scrollTop();
if(st < lastScrollTop) {
console.log('Up');
}
else if(st > lastScrollTop) {
console.log('Down');
}
lastScrollTop = st;
});
}
// Other browsers
else {
$('body').on('mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0) {
console.log('Up');
}
else if(e.originalEvent.wheelDelta < 0) {
console.log('Down');
}
});
}
Safari browser
มันจะเป็นประโยชน์ในการเสริมการแก้ปัญหา
ฉันเข้าใจว่ามีคำตอบที่ยอมรับแล้ว แต่ต้องการโพสต์สิ่งที่ฉันใช้ในกรณีที่สามารถช่วยใครได้ ฉันได้รับทิศทางเช่นนั้นcliphex
กับเหตุการณ์ mousewheel แต่ด้วยการสนับสนุน Firefox มีประโยชน์ในการทำเช่นนี้ในกรณีที่คุณกำลังทำอะไรบางอย่างเช่นการล็อคการเลื่อนและไม่สามารถรับการเลื่อนด้านบนในปัจจุบัน
$(window).on('mousewheel DOMMouseScroll', function (e) {
var direction = (function () {
var delta = (e.type === 'DOMMouseScroll' ?
e.originalEvent.detail * -40 :
e.originalEvent.wheelDelta);
return delta > 0 ? 0 : 1;
}());
if(direction === 1) {
// scroll down
}
if(direction === 0) {
// scroll up
}
});
เหตุการณ์เลื่อนพฤติกรรมผิดปกติใน FF (มันจะยิงหลายครั้งเพราะความเรียบเนียนเลื่อน) แต่มันทำงาน
หมายเหตุ: เลื่อนเหตุการณ์จริงเป็นเชื้อเพลิงเมื่อลากแถบเลื่อนโดยใช้ปุ่มลูกศรหรือเมาส์วีล
//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, ซาฟารีฉันลงเอยด้วยตัวอย่างข้อมูลนี้:
//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);
});
ในกรณีที่คุณต้องการทราบว่าคุณเลื่อนขึ้นหรือลงโดยใช้อุปกรณ์ตัวชี้ (เมาส์หรือแทร็กแพด) คุณสามารถใช้คุณสมบัติdeltaYของwheel
เหตุการณ์
$('.container').on('wheel', function(event) {
if (event.originalEvent.deltaY > 0) {
$('.result').append('Scrolled down!<br>');
} else {
$('.result').append('Scrolled up!<br>');
}
});
.container {
height: 200px;
width: 400px;
margin: 20px;
border: 1px solid black;
overflow-y: auto;
}
.content {
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
Scroll me!
</div>
</div>
<div class="result">
<p>Action:</p>
</div>
var tempScrollTop, currentScrollTop = 0;
$(window).scroll(function(){
currentScrollTop = $("#div").scrollTop();
if (tempScrollTop > currentScrollTop ) {
// upscroll code
}
else if (tempScrollTop < currentScrollTop ){
// downscroll code
}
tempScrollTop = currentScrollTop;
}
หรือใช้นามสกุลเมาส์วีดูที่นี่
ฉันได้เห็นคำตอบที่ดีหลายรุ่นที่นี่ แต่ดูเหมือนว่าบางคนมีปัญหาข้ามเบราว์เซอร์ดังนั้นนี่คือการแก้ไขของฉัน
ฉันใช้สิ่งนี้ได้สำเร็จในการตรวจหาทิศทางใน FF, IE และ Chrome ... ฉันไม่ได้ทดสอบในซาฟารีเนื่องจากฉันใช้ windows โดยทั่วไป
$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll':
function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
//Determine Direction
if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
//Up
alert("up");
} else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
//Up
alert("up");
} else {
//Down
alert("down");
}
}
});
โปรดทราบฉันยังใช้สิ่งนี้เพื่อหยุดการเลื่อนดังนั้นหากคุณต้องการให้การเลื่อนยังคงเกิดขึ้นคุณต้องลบ e.preventDefault(); e.stopPropagation();
ในการเพิกเฉยสแนปส์ / โมเมนตัม / เด้งกลับมาที่ด้านบนและด้านล่างของหน้านี่คือคำตอบที่ได้รับการยอมรับของ Josiah :
var prevScrollTop = 0;
$(window).scroll(function(event){
var scrollTop = $(this).scrollTop();
if ( scrollTop < 0 ) {
scrollTop = 0;
}
if ( scrollTop > $('body').height() - $(window).height() ) {
scrollTop = $('body').height() - $(window).height();
}
if (scrollTop >= prevScrollTop && scrollTop) {
// scrolling down
} else {
// scrolling up
}
prevScrollTop = scrollTop;
});
คุณสามารถกำหนดทิศทางของเมาส์ได้
$(window).on('mousewheel DOMMouseScroll', function (e) {
var delta = e.originalEvent.wheelDelta ?
e.originalEvent.wheelDelta : -e.originalEvent.detail;
if (delta >= 0) {
console.log('scroll up');
} else {
console.log('scroll down');
}
});
ใช้สิ่งนี้เพื่อค้นหาทิศทางการเลื่อน นี่เป็นเพียงการหาทิศทางของแนวตั้งเลื่อน รองรับเบราว์เซอร์ข้ามทั้งหมด
var scrollableElement = document.getElementById('scrollableElement');
scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);
function findScrollDirectionOtherBrowsers(event){
var delta;
if (event.wheelDelta){
delta = event.wheelDelta;
}else{
delta = -1 * event.deltaY;
}
if (delta < 0){
console.log("DOWN");
}else if (delta > 0){
console.log("UP");
}
}
รหัสนี้ใช้ได้ดีกับ IE, Firefox, Opera และ Chrome:
$(window).bind('wheel mousewheel', function(event) {
if (event.originalEvent.deltaY >= 0) {
console.log('Scroll down');
}
else {
console.log('Scroll up');
}
});
'wheel mousewheel 'และคุณสมบัติdeltaYต้องใช้ในฟังก์ชันbind ()
ข้อควรจำ: ผู้ใช้ของคุณต้องอัปเดตระบบและเบราว์เซอร์ด้วยเหตุผลด้านความปลอดภัย ในปี 2018 ข้อแก้ตัวของ "ฉันมี IE 7" เป็นเรื่องไร้สาระ เราต้องให้ความรู้แก่ผู้ใช้
ขอให้เป็นวันที่ดี :)
ทำให้มันง่ายมาก:
วิธีฟังเหตุการณ์ jQuery:
$(window).on('wheel', function(){
whichDirection(event);
});
วิธีฟังเหตุการณ์ของ Vanilla JavaScript:
if(window.addEventListener){
addEventListener('wheel', whichDirection, false);
} else if (window.attachEvent) {
attachEvent('wheel', whichDirection, false);
}
ฟังก์ชั่นยังคงเหมือนเดิม:
function whichDirection(event){
console.log(event + ' WheelEvent has all kinds of good stuff to work with');
var scrollDirection = event.deltaY;
if(scrollDirection === 1){
console.log('meet me at the club, going down', scrollDirection);
} else if(scrollDirection === -1) {
console.log('Going up, on a tuesday', scrollDirection);
}
}
ผมเขียนโพสต์แบบเจาะลึกเพิ่มเติมเกี่ยวกับมันนี่
คุณสามารถใช้ตัวเลือกทั้งเลื่อนและล้อเลื่อนเพื่อติดตามการเคลื่อนไหวขึ้นและลงในครั้งเดียว
$('body').bind('scroll mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('moving down');
}
else {
console.log('moving up');
}
});
คุณสามารถแทนที่ 'body' ด้วย (หน้าต่าง) ได้เช่นกัน
สต็อกเพิ่มขึ้นใน.data ()
องค์ประกอบของการเลื่อนจากนั้นคุณจะสามารถทดสอบจำนวนครั้งที่เลื่อนถึงด้านบน
ทำไมไม่มีใครใช้event
วัตถุที่ส่งกลับโดยjQuery
เมื่อเลื่อน?
$window.on('scroll', function (event) {
console.group('Scroll');
console.info('Scroll event:', event);
console.info('Position:', this.pageYOffset);
console.info('Direction:', event.originalEvent.dir); // Here is the direction
console.groupEnd();
});
ฉันกำลังใช้chromium
และฉันไม่ได้ตรวจสอบเบราว์เซอร์อื่น ๆ หากพวกเขามีdir
คุณสมบัติ
เนื่องจากbind
เลิกใช้แล้วใน v3 ("แทนที่on
") และwheel
ได้รับการสนับสนุนตอนนี้ลืมwheelDelta
:
$(window).on('wheel', function(e) {
if (e.originalEvent.deltaY > 0) {
console.log('down');
} else {
console.log('up');
}
if (e.originalEvent.deltaX > 0) {
console.log('right');
} else {
console.log('left');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>
wheel
ความเข้ากันได้ของเบราว์เซอร์ของเหตุการณ์ใน MDN's (2019-03-18) :
if(e.originalEvent.deltaY > 0) { console.log('down'); } else if(e.originalEvent.deltaY < 0) { console.log('up'); } else if(e.originalEvent.deltaX > 0) { console.log('right'); } else if(e.originalEvent.deltaX < 0) { console.log('left'); }
คุณสามารถใช้สิ่งนี้ได้เช่นกัน
$(document).ready(function(){
var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});
function Get_page_scroll_direction(){
var running_scroll_position = $(window).scrollTop();
if(running_scroll_position > currentscroll_position) {
$('.direction_value').text('Scrolling Down Scripts');
} else {
$('.direction_value').text('Scrolling Up Scripts');
}
currentscroll_position = running_scroll_position;
}
});
.direction_value{
position: fixed;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
z-index: 99;
left: 0;
top: 0;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
ใน.data()
องค์ประกอบคุณสามารถจัดเก็บ JSON และทดสอบค่าเพื่อเริ่มกิจกรรม
{ top : 1,
first_top_event: function(){ ...},
second_top_event: function(){ ...},
third_top_event: function(){ ...},
scroll_down_event1: function(){ ...},
scroll_down_event2: function(){ ...}
}
การตรวจจับนี้ง่ายและสะดวกเมื่อผู้ใช้เลื่อนออกจากด้านบนของหน้าและเมื่อกลับไปที่ด้านบน
$(window).scroll(function() {
if($(window).scrollTop() > 0) {
// User has scrolled
} else {
// User at top of page
}
});
นี่เป็นทางออกที่ดีที่สุดในการตรวจจับทิศทางเมื่อผู้ใช้เลื่อนลง
var currentScrollTop = 0 ;
$(window).bind('scroll', function () {
scrollTop = $(this).scrollTop();
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
if(scrollTop > currentScrollTop){
// downscroll code
$('.mfb-component--bl').addClass('mfbHide');
}else{
// upscroll code
$('.mfb-component--bl').removeClass('mfbHide');
}
currentScrollTop = scrollTop;
}, 250));
});
คุณควรลองสิ่งนี้
var scrl
$(window).scroll(function(){
if($(window).scrollTop() < scrl){
//some code while previous scroll
}else{
if($(window).scrollTop() > 200){
//scroll while downward
}else{//scroll while downward after some specific height
}
}
scrl = $(window).scrollTop();
});
ฉันมีปัญหากับการเลื่อนแบบยืดหยุ่น (การตีกลับด้วยการเลื่อนแถบยาง) ไม่สนใจเหตุการณ์เลื่อนลงหากใกล้กับส่วนบนของหน้าทำงานสำหรับฉัน
var position = $(window).scrollTop();
$(window).scroll(function () {
var scroll = $(window).scrollTop();
var downScroll = scroll > position;
var closeToTop = -120 < scroll && scroll < 120;
if (downScroll && !closeToTop) {
// scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
$('.top-container').slideUp('fast');
$('.main-header').addClass('padding-top');
} else {
// scrolled up
$('.top-container').slideDown('fast');
$('.main-header').removeClass('padding-top');
}
position = scroll;
});
สิ่งนี้ใช้ได้กับเบราว์เซอร์พีซีหรือโทรศัพท์ทุกประเภทขยายคำตอบยอดนิยม หนึ่งสามารถสร้างหน้าต่างวัตถุเหตุการณ์ที่ซับซ้อนมากขึ้น ["scroll_evt"] แล้วเรียกมันในฟังก์ชั่น handleScroll () สิ่งนี้ทริกเกอร์สำหรับ 2 เงื่อนไขที่เกิดขึ้นพร้อมกันหากการหน่วงเวลาบางอย่างผ่านไปหรือเดลต้าบางตัวถูกส่งผ่านเพื่อกำจัดทริกเกอร์ที่ไม่ต้องการ
window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
var currentTime = Date.now();
var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
if(boolRun){
window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
window["scroll_evt"]["pos"] = currentScroll;
window["scroll_evt"]["time"] = currentTime;
handleScroll();
}
});
function handleScroll(){
event.stopPropagation();
//alert(window["scroll_evt"]["direction"]);
console.log(window["scroll_evt"]);
}