When I use mouse wheel to scroll content in div I want it to scroll by e.g., 30px each step or each mouse wheel tick w/e is the best solution.
I would prefer performance > ease i.e. I'm preferring javascript > jquery

When I use mouse wheel to scroll content in div I want it to scroll by e.g., 30px each step or each mouse wheel tick w/e is the best solution.
I would prefer performance > ease i.e. I'm preferring javascript > jquery

• javascript
• jquery
• html
• scroll

• 11 I would remend letting the user's operating system handle that. It's not usually a good user experience to change how a user's mouse works just because you think it should be done differently. – Rob Commented Sep 2, 2013 at 1:29
• When you e up with your own solution it is best to write it as an answer not as an edit to the question. – apaul Commented Sep 2, 2013 at 2:17

2 Answers 2

So I fiddled some solution of my own, you can see example here
Thanks Tom for leading me to this answer.

JS:

function wheel($div,deltaY){
   var step = 30;
   var pos = $div.scrollTop();
   var nextPos = pos + (step*(-deltaY))
   console.log("DelatY: " + deltaY + ", Step: " + step + ", nextPos: " + nextPos);
   $div.scrollTop(nextPos);
}

$('#test').bind('mousewheel', function(event, delta, deltaX, deltaY) {
    wheel($(this),deltaY);
    event.preventDefault();
});

Used libraries:

• jQuery 1.8.3
• jQuery mousewheel

There's big problems in implementing mousewheel details yourself, since there is (AFAIK) three different behaviours that the browsers are currently doing. Everything but Firefox currently supports mousewheel event, which passes a wheelDelta parameter of 120 per "click". Firefox has DOMMouseScroll event, that will pass a detail parameter of 3 (I think) per "click", and in the opposite direction. Apple devices have a much more granular resolution, and have a deceleration to them; so Webkit browsers give also delta in the two axes, and there are no "clicks" on a trackpad two-fingered scroll. Finally, DOM Level 3 Events draft standard will define a "click" being (I think) 1, and provide a possibility of three axes; so you need to future-proof your code. So implementing your own wheel handler is kind of a pain (I know since I am now implementing zooming for my SVG app using the mousewheel).

You can consult Javascript: The Definitive Guide, chapter 17.6 Mousewheel Events, for more details.