Возобновление исполнения события после preventDefault();

#javascript #mouse_event

                    
Имеется следующая функция прокрутки вверх страницы(натив JS, и ничего более). preventDefault();
- здесь работает хорошо, но только с одной стороны - предотвращает лишний тик колеса
мыши, прокрутка останавливается в том месте где нужно. Но! Дальнейшие использование
колесика соответственно также предотвращается. Можно не использовать preventDefault();
но тогда возникает лишний шаг прокрутки в зависимости от того в какую сторону крутанули
колесо. (вероятно можно бороться с этим неудобством вычисляя в какую сторону прокрутили
колесо, и добавлять обратную прокрутку scrollBy(); высчитав при этом шаг прокрутки
для каждого браузера). Но задачу хотелось бы максимально упростить, а именно: после
движения колеса мыши предотвратить лишний шаг с помощью preventDefault(), после чего
возобновить нормальное использование прокрутки колесиком мыши. Интернет выдает что-то
из jquery: bind, unbind и прочее - нужен только JS.



var buttonUp = document.getElementById("up");
buttonUp.addEventListener("click", scroll);


function scroll(){
  var x = window.pageXOffset, y = window.pageYOffset;
  var duration=1000; 
  var start = new Date; 
  var timer=setInterval(frame,10);
  window.addEventListener("mousewheel", st);
  function st(e){
    e.preventDefault();
    clearInterval(timer);
  }
  function frame(){
    var progress = (new Date - start)/duration;
    var y1 = (1-progress) * y;
    window.scrollTo(x,y1);
    if (progress > 1) {progress = 1;}
    if(progress == 1){
      clearInterval(timer);         
    }
  }  
}




    

Ответы

Ответ 1

Все оказалось проще чем я думал. Путем мысленного эксперимента вспомнил про removeEventListener();
Последней строчкой функции отсановки таймера нужно было удалить обработчик, выглядит так:

 function st(e){
    e.preventDefault();
    clearInterval(timer);
    window.removeEventListener("mousewheel", st); //<------------------
  }


Может кому-то поможет в поисках по интернетам:)