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

I know how to detect scrolling past a certain point on the page with .scrollTop(), but I want this certain point to be my current location but only after I've stopped scrolling.

Why I need this: I have a navbar that changes all of it's css depending on if I've scrolled up or down. So if my scroll finger shivers in a different direction (from up to down scroll for example), the navbar will transform like a strobe light. So my plan was to only detect scrolls abover or below 10px so the user will need to make a dedicated scroll to activate the navbar css change.

pseudo code:

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

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

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

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

Solution 4

let touchstartX = 0
let touchendX = 0
let touchstartY = 0
let touchendY = 0

const slider = document.getElementById('topMenuSlider')

function handleGesture() {
  if (touchendX < touchstartX) alert('swiped left!')
  if (touchendX > touchstartX) alert('swiped right!')
  if (touchendY < touchstartY) alert('swiped UP!')
  if (touchendX > touchstartX) alert('swiped DOWN!')
}

slider.addEventListener('touchstart', e => {
  touchstartX = e.changedTouches[0].screenX;
  touchstartY = e.changedTouches[0].screenY
})

slider.addEventListener('touchend', e => {
  touchendX = e.changedTouches[0].screenX;
  touchendY = e.changedTouches[0].screenY
  handleGesture()
})

View more solutions