在瀏覽器中從當前位置滾動距離後檢測滾動

Question

我想要檢測我是否正在滾動，但僅在滾動距離當前位置一定距離後。當我停止滾動，這個距離復位到當前位置

我知道如何檢測滾動過去的.scrollTop()頁面上的某一點，但我想這一定點是我目前的位置，但我已經停止之後才滾動。

爲什麼我需要這個：我有一個導航欄，它改變了所有的CSS取決於如果我已經向上或向下滾動。因此，如果我的滾動手指以不同的方向發抖（例如從上到下滾動），則導航欄將像頻閃燈那樣轉換。所以我的計劃是隻檢測10px以上的滾動條，所以用戶需要製作一個專門的滾動條來激活導航欄的CSS變化。

僞代碼：

if (scrolled 10px above or below current_location in browser) { 
    console.log('it worked'); 
} else { 
    console.log('You have not scrolled far enough!') 
} 

if (scrolling stops) { 
    reset position of current_location. 
} 

Answer 1

這將是最簡單的方法：

$(document).ready(function() { 

var previous = 0; 

$(window).scroll(function() { 

    var current = $(this).scrollTop(); 

    if (current > previous) // down 
    else // up 

    previous = current; 
}); 
}); 

http://codepen.io/anon/pen/ojxPOg?editors=001

使用鼠標滾輪插件，您甚至在實際開始滾動方向之前就會知道。可能會很好，但對於移動，上述仍然是需要的（以最快的方式）。

http://codepen.io/anon/pen/YPmjym?editors=001

編輯 - 在觸摸設備上如預期的第一個代碼可能無法正常工作。平移屏幕實際上並不會觸發滾動，直到您釋放它爲止（據我所見）。解決這個問題需要另一個腳本來監聽touchmove事件。以下是一個示例：

$(window).on('touchstart', function(e) { 

    var swipe = e.originalEvent.touches, 
    start = swipe[0].pageY; 

    $(this).on('touchmove', function(e) { 

     var contact = e.originalEvent.touches, 
     end = contact[0].pageY, 
     distance = end-start; 

     if (distance < -30) // up 
     if (distance > 30) // down 
    }) 
    .one('touchend', function() { 

     $(this).off('touchmove touchend'); 
    }); 
}); 

約30像素的數量通常被視爲目標滑動。

Answer 2

我不明白你爲什麼需要這個，但低於爲您的僞代碼的代碼：

var currentScrolled = 0; 
$(document).scroll(function() { 

currentScrolled = $(this).scrollTop(); 

if (currentScrolled > 10) { 
    console.log('it worked'); 
} else { 
    console.log('You have not scrolled far enough!') 
}}); 

$(document).scrollstop(function(){ 
    currentScrolled = 0; 
}); 

Answer 3

with this i was able to get the swipe up and down... 

我添加了一個標誌，以便它只有一次是解決繼續滑動的問題上運行。 感謝https://css-tricks.com/forums/topic/detect-vertical-direction-of-jquery-touchmove/

currentY: 
var swipe = false, 
var lastY, 
timer; 
$(document).bind('touchstart', function(e) { 

lastY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY; 
console.log(lastY); 
}); 
$(document).bind('touchmove mousemove', function(e) { 

var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY; 

if(!swipe){ 
if (Math.abs(currentY-lastY) < 50) { return; } 
swipe = true; 
if (currentY > lastY) { 
console.log('down'); 
} else { 
console.log('up'); 
} 
} 
}).on('touchend', function(){ 
    swipe = false; 
});