mohith_j
06-04-2004, 10:05 PM
I was curious if anyone knows if there is a way to detect if the mouse wheel is being used to scroll a div. Neither onscroll or IE's onmousewheel get fired. I can't seem to find any event that gets fired, yet Mozilla still scrolls the div (the reason I need to detect this is because I have custom scrolling logic that I need to run).
In the following sample code, I add <a> tags to my divs so that the divs can grab focus and respond to key events. This also has the sideeffect that mouse wheel scrolling is enabled.
<html>
<body>
<div id="parent" style="overflow: auto; width: 100px; height: 400px; border: 1px solid blue;"></div>
<script>
var colors = [ "red", "green", "yellow" ];
var p = document.getElementById("parent");
for (var i = 0; i < 100; i++) {
var d = document.createElement("div");
var a = document.createElement("a");
a.href = "#";
a.appendChild(document.createTextNode(colors[i % colors.length]));
d.appendChild(a);
d.style.width = "75px";
d.style.height = "30px";
d.style.backgroundColor = colors[i % colors.length];
p.appendChild(d);
}
</script>
</body>
</html>
In the following sample code, I add <a> tags to my divs so that the divs can grab focus and respond to key events. This also has the sideeffect that mouse wheel scrolling is enabled.
<html>
<body>
<div id="parent" style="overflow: auto; width: 100px; height: 400px; border: 1px solid blue;"></div>
<script>
var colors = [ "red", "green", "yellow" ];
var p = document.getElementById("parent");
for (var i = 0; i < 100; i++) {
var d = document.createElement("div");
var a = document.createElement("a");
a.href = "#";
a.appendChild(document.createTextNode(colors[i % colors.length]));
d.appendChild(a);
d.style.width = "75px";
d.style.height = "30px";
d.style.backgroundColor = colors[i % colors.length];
p.appendChild(d);
}
</script>
</body>
</html>