Detect scrolling after scrolling distance from current position in browser

Question

I want to detect if i am scrolling but only after I\'ve scrolled a certain distance from my current location. When I stop scrolling, this distance resets to the current location

Answer 1

This would be the simplest approach :

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

Using the mousewheel plugin, you'd know even before you've actually started scrolling what the direction is. Might be nice but for mobile the above would still be needed (for the quickest way).

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

Edit - the first code might not work as expected on touch devices. Panning the screen doesn't actually fire a scroll until you release it (as far as I've experienced). Addressing that would need another script that will listen for touchmove events. Here's one example of how to do that :

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

An amount of about 30 pixels is usually treated as a targeted swipe.

Answer 2

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

i add a flag so it only run once that fix the problem of keep swiping. thanks to 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;
});

Answer 3

I didn't understand why you need this, but below is the code for your pseudo code:

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