Mousewheel event in modern browsers

Clean and simple: window.addEventListener(“wheel”, event => console.info(event.deltaY)); Browsers may return different values for the delta (for instance, Chrome returns +120 (scroll up) or -120 (scroll down). A nice trick to normalize it is to extract its sign, effectively converting it to +1/-1: window.addEventListener(“wheel”, event => { const delta = Math.sign(event.deltaY); console.info(delta); }); Reference: MDN.

How to prevent page scrolling when scrolling a DIV element?

Update 2: My solution is based on disabling the browser’s native scrolling altogether (when cursor is inside the DIV) and then manually scrolling the DIV with JavaScript (by setting its .scrollTop property). An alternative and IMO better approach would be to only selectively disable the browser’s scrolling in order to prevent the page scroll, but … Read more