CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
skmasq
skmasq

Reputation: 4521

How to specify how many pixels scroll moves on each step?

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

Upvotes: 4

Views: 21187

Answers (2)

skmasq
skmasq

Reputation: 4521

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

Upvotes: 7

Amadan
Amadan

Reputation: 198436

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.

Upvotes: 6

Related Questions