Как отловить событие прокрутки?

Question

[myskypesla]

Есть страница с высотой 100vh, без прокрутки. На ней есть текст в блоке высотой 200px и со свойство overflow: hidden;
Как сделать чтобы в любом месте где бы ни стоял курсор мыши? при прокрутке колесиком мыши текст внутри блока листался вверх? и блок перемещался слева направо?
Не могу найти библиотеку, чтобы отловить движение колесиком мыши при 100% высоте сайта без прокрутки

Answer 1

[Алексей Ярков]

$(function(){
    $(document).on('mousewheel DOMMouseScroll', function(event){
  	var course = event.originalEvent.wheelDelta;
  	if(course  > 0){
    	    console.log("Scroll UP");
        }
        else{
    	    console.log("Scroll DOWN");
        }
    });
});

https://jsfiddle.net/yarkov_aleksei/ebew3en0/

Comments

[myskypesla]

1 раз прокрутка срабатывает, дальше ничего не происходит.

[Алексей Ярков]

myskypesla: Вы консоль открывали? https://jsfiddle.net/yarkov_aleksei/ebew3en0/

[myskypesla]

Да открывал, только вот этот код срабатывает 1 раз $('p').animate({'top': -20});

[Алексей Ярков]

myskypesla:

только вот этот код срабатывает 1 раз $('p').animate({'top': -20});

А вы что от него ожидаете? Чтобы значение top менялось?

[myskypesla]

Да чтобы при прокрутке роликом текст текст поднимался вверх, так как его много в этом блоке, а страница на месте стояла, ну она итак будет стоять на месте, так как она высотой 100%

[Алексей Ярков]

myskypesla: Тогда не {'top': -20}писать надо, а вычислять куда колесо крутится и динамически выставлять свойство top.

[Алексей Ярков]

myskypesla: https://jsfiddle.net/yarkov_aleksei/ebew3en0/1/

[myskypesla]

Алексей Ярков Алексей, данный код срабатывает 1 раз, т.е. он поднимает текст и всё, но мне надо достич эффекта, чтобы когда крутанул я роликом 1 раз, текст поднялся на 20px, крутанул еще раз, он ещё поднялся на 20px, тоже самое и вниз

[Алексей Ярков]

myskypesla: Потрудитесь прочесть мой комментарий про динамическое присваивание свойства top и понять его.

[Алексей Ярков]

myskypesla: Верхнюю и нижнюю границу сами сделаете ))
https://jsfiddle.net/yarkov_aleksei/ebew3en0/

[myskypesla]

Алексей Ярков: Спасибо большое Алексей. Всё круто работает, поменял 20px на 1px и теперь всё плавно и как должно быть. Огромное спасибо за ответ.

[Алексей Ярков]

myskypesla: пожалуйста

Answer 2

[Максим Тимофеев]

есть событие onscroll - Вам оно не подходит
а есть onwheel - это то что Вам надо, но там есть много подводных камней, вот почитаете:
https://learn.javascript.ru/mousewheel - тут больше
www.w3schools.com/jsref/event_onwheel.asp - тут проще

Answer 3

[Иван]

https://github.com/jquery/jquery-mousewheel