Виявлення прокручування після прокручування відстані від поточної позиції в браузері - javascript, jquery, html, css, scroll

Я хочу виявити, якщо я прокручую, але тільки після того, як я прокручую певну відстань від мого поточного місця розташування.

Я знаю, як визначити прокрутку за певною точкою на сторінці .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.
}

Відповіді:

2 для відповіді № 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 пікселів зазвичай розглядається як цільовий удар.

---

2 для відповіді № 2

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

---

1 для відповіді № 3

Я не зрозумів, чому це потрібно, але нижче вказано код для вашого псевдокоду:

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

---