Как отслеживать прокрутку вверх и вниз по отдельности?

Question

[Max Vyznyuk]

Нужно при прокрутке вниз вызывать одну функцию, а при прокрутке вверх другую, никак не могу это реализовать правильно. Вниз скролл работает хорошо, вверх не работает вообще и ошибок при этом не возникает

<div onscroll="scroll('first')" id="first">
  <div  onscroll="scroll('second')" id="second" class="">
    <div  onscroll="scroll('third')" id="third" class=""></div>
  </div>
</div>

function scroll(id){
  var elem = document.getElementById(id);
  var second = document.getElementById('second');
  var third = document.getElementById('third');
  var tempScrollTop = 0;
  var currentScrollTop = elem.scrollTop;
  if (tempScrollTop < currentScrollTop ){
    //scrolling down
      if(id == 'first'){
         second.className = 'scroll-one';
      } else if(id == 'second'){
         third.className = 'scroll-one';
      }
  }
  else if ( currentScrollTop < tempScrollTop){
  //scrolling up
      if(id == 'third'){
          third.className = 'scroll-down-third';
      } else if(id == 'second'){
         second.className = 'scroll-down';
      }
  }
  tempScrollTop = currentScrollTop;
}

В классах которые присваиваются функцией - CSS-анимация. Присваиваются только класс 'scroll-one'

Answer 1

[Александр Логинов-Солоницын]

Если нужно определять направление, когда документ прокручивают стрелками с клавиатуры или перетаскиванием ползунка скроллбара, то как вариант - https://codepen.io/login2030/pen/wvweMzW

var scrollPos = 0;
$(window).scroll(function(){
   var st = $(this).scrollTop();
   if (st > scrollPos){
     $('#result').html('Вниз');
   } else {
     $('#result').html('Вверх');
   }
   scrollPos = st;
});

Comments

[dalnick]

А при при прокрутке колёсиком мыши это не работает?

[Александр Логинов-Солоницын]

Должно работать dalnick. Мышкой не пользуюсь уже года 3 =) На трекболе и трекпаде работает 100%

Answer 2

[wildsnail]

Вот маленькая библиотека, которая решит твою проблему. Подключаешь ее и по скроллу вверх/вниз будешь получать направление скроллинга, из плюсов, то что твой колбек будет выполняться именно на новую прокрутку, а не на каждое событие скролл

Answer 3

[Виктор П.]

var content = document.getElementById('gameRel-mainBlock');

if (content.addEventListener) {
if ('onwheel' in document) {
// IE9+, FF17+
content.addEventListener("wheel", onWheel, false);
} else if ('onmousewheel' in document) {
// устаревший вариант события
content.addEventListener("mousewheel", onWheel, false);
} else {
// 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
content.addEventListener("MozMousePixelScroll", onWheel, false);
}
} else { // IE<9
content.attachEvent("onmousewheel", onWheel);
}

function onWheel(e) {
e = e || window.event;
var delta = e.deltaY || e.detail || e.wheelDelta;

if (delta < 0) {//мотаем вверх и стопорим если скролл уже вверху
if (content.scrollTop == 0) e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
else {//когда мотаем вниз, стопорим скролл на низу
//if (content.clientHeight + content.scrollTop - 55 > content.scrollHeight)
if ($(content).height()+content.scrollTop >= 548)
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
}

Answer 4

[Александр Миранович]

var tempScrollTop, currentScrollTop = 0;

jQuery("#div").scroll(function(){

currentScrollTop = jQuery("#div").scrollTop();

if (tempScrollTop < currentScrollTop )
//scrolling down
else if (tempScrollTop > currentScrollTop )
//scrolling up

tempScrollTop = currentScrollTop;
}

Answer 5

[RED_LIGHTNING]

let tempScrollTop, currentScrollTop;

$(window).on("scroll", function(){

setTimeout(( ) => {
tempScrollTop = widow.scrollY
}, 1);

currentScrollTop = window.scrollY;

if (tempScrollTop > currentScrollTop ){
console.log("Иду ввееерх");
}
else if (tempScrollTop < currentScrollTop ) {
console.log("Иду внииииз");
}
});

// Ребята способ рабочий я сам искал и в конце концов сделал сам.