CODEWITHSUNDEEP
javascriptbrowserevent-handlingmouseevent
brentonstrine
brentonstrine

Reputation: 22752

How to detect mouse scroll when the page doesn't actually scroll (because it's too small)

The scroll event does not capture the mouse "scroll" action, but rather captures the page scroll action.

This means that on pages too small to actually scroll, it's not possible to detect the user's scroll action (e.g. to translate it into a zoom action).

To see what I mean, compare the following two:

https://jsfiddle.net/r8aykcut/1/
https://jsfiddle.net/r8aykcut/2/

Is there a way to listen for the mouse scroll event without the page itself scrolling?

Upvotes: 1

Views: 84

Answers (3)

Bhavik vora
Bhavik vora

Reputation: 274

You have added scroll listener. It will listen when page is scroll. You have to use wheel listener.

document.addEventListener("wheel", detect);
function detect (e) {

console.log(e)

};

Above code will work for you.

Upvotes: 1

ioopsd
ioopsd

Reputation: 26

i think you can use wheel event. The wheel event is fired when a wheel button of a pointing device (usually a mouse) is rotated. this is the reference link: wheel event

Upvotes: 1

hamidreza nikoonia
hamidreza nikoonia

Reputation: 2165

you can use this listener

 addEventListener("wheel", anyFunctionYouWant );

you must set this Listener in your which element , you want to zoom

for example if you have some thing like this

<div class="wraper">
   <div>
      <div id="ele" ></div>
   </div>
</div>

set this Listener for .wraper , this is because i think you want some thing like zooming in google map , if you want this , you have function , and your function trigger if user scroll on your Map ( for zoom in/out ) , and cursor must set on your that element , have Listener

Upvotes: 1

Related Questions