I created a little html test that can be used to test the browsers behavior. Create a wheeltest.html with this code and open in your browser. Lets use this to collect some info.
<html>
<body>
<script>
var arr = [];
var modes = ["pixel", "line", "page"];
var square_y = 0;
function on_wheel(e) {
e.preventDefault();
e.stopPropagation();
// Get line of event info and add to array
let line = modes[e.deltaMode] + " " + e.deltaY + "\n";
arr.push(line);
arr.splice(0, Math.max(0, arr.length - 16)); // limit to 16 items
//show
let el = document.getElementById("out");
el.innerText = "dpr: " + window.devicePixelRatio + "\n\n...\n";
for (line of arr) {
el.innerText += line;
}
// Make it move the square
let dy = 0;
if (e.deltaMode == 1) {
dy = 16 * e.deltaY; // line
} else if (e.deltaMode == 2) {
dy = 600 * e.deltaY; // page
} else { // e.deltaMode == 0 -> pixel
dy = e.deltaY / window.devicePixelRatio;
}
dy = 0.4 * dy; // scale so that about one "scroll" brings the square to the other side
square_y = Math.max(0, Math.min(350, square_y + dy));
document.getElementById("square").style.top = square_y + "px";
}
document.addEventListener("wheel", on_wheel, {passive: false});
</script>
<div style='background:#aaf; position: fixed; left: 400px; width:100px; height: 400px;'>
<div id='square' style='background:#0a0; position: absolute; left: 25px; width:50px; height: 50px;'></div>
</div>
<p id='out'>
Scroll using mouse-wheel, touch-scroll, and pinch.
</p>
</body>
</html>
It turns out that the value of
dyon our wheel event differers per platform/browser. This can be as much as 96 vs 200.I created a little html test that can be used to test the browsers behavior. Create a
wheeltest.htmlwith this code and open in your browser. Lets use this to collect some info.