Scroll, or MouseWheel event in html

Question

Tell me, how can I implement a scroll, where is it missing? The page is built using position absolute and there is no skolla ... But you need to know when the user turns the wheel and how much. For example, blocks will move from the scroll.
The window.onscroll event does not handle it. the window itself remains motionless ...
Thank you in advance!
Here is an example! http://www.jandk.fr/

Found how to implement on a mousewheel, But still - are there any other ways to implement this? (They say that soon they will not support this method), and it’s not adaptive ... + there will be porridge on touch devices ... I really hope for your help!

  var elem = document.getElementById('container'); if (elem.addEventListener) { if ('onwheel' in document) { elem.addEventListener("wheel", onWheel); } else if ('onmousewheel' in document) { elem.addEventListener("mousewheel", onWheel); } else { elem.addEventListener("MozMousePixelScroll", onWheel);} } else { // IE8- elem.attachEvent("onmousewheel", onWheel);} function onWheel(e) { e = e || window.event; var delta = e.deltaY || e.detail || e.wheelDelta; var info = document.getElementById('delta'); info.innerHTML = +info.innerHTML + delta; e.preventDefault ? e.preventDefault() : (e.returnValue = false);}

  #container { width: 200px; height: 200px; border: 1px solid black; background: #0FF; overflow: auto;}

  Прокрутка: <span id="delta">0</span> <div id="container"> Прокрути надо мной. </div>

Ie it will cut all that climbs and hides the scrollbar itself, if you need a scroll bar then change this property

Ionon ionon 2,974 10 silver marks 30 bronze marks · Accepted Answer · 2016-06-18T09:56:09

Well, for example, you can follow the mouse wheel directly. This is a mousewheel event.

It’s best to work with it using this plugin: https://github.com/jquery/jquery-mousewheel

 $('#my_elem').on('mousewheel', function(e) { // прокрутка колесика по вертикали console.log(e.deltaY); // прокрутка по горизонтали (так умеют мышки Apple например) console.log(e.deltaX); });

Delta is a variable with the help of which you can understand which way the wheel is turned (less than zero - up, more than zero down). And with what force they do it (the more 1, the faster they spin)

I do not think for touch devices have their own events: touchstart, touchend, touchmove (or pointermove for MS).
Judging by your example - you need Horizontal Parallax Scroll (google it).

Scroll, or MouseWheel event in html

1 answer 1

More articles: