Catalina Neshina Catalina Neshina - 5 months ago 26
jQuery Question

zoom in/out a picture by scroll event

I need to zoom in/out a picture, when I'm scrolling on that picture.
I'm asking you only about how to detect scroll in/out on the picture? I'm trying this (I've found it in the internet):

$('.map').scroll(function(event){
if(event.originalEvent.wheelDelta /120 > 0) {
alert('scrolling up !');
}
else{
alert('scrolling down !');
}
});


//

.map


is the class of my picture.

It doesn't work for me ....

Answer

Attach mousewheel event as scroll event is sent whenever the element's scroll position changes.

$('#map').on('mousewheel', function(e) {
  e.preventDefault();
  if (e.originalEvent.wheelDelta / 120 > 0) {
    console.log('scrolling up !', 'X: ', e.pageX, 'Y: ', e.pageY);
  } else {
    console.log('scrolling down !', 'X: ', e.pageX, 'Y: ', e.pageY);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xft1/v/t1.0-1/p200x200/13096358_986500121418450_5109646388299684610_n.jpg?oh=27ee2801d2df5c9426eef38bb8a45509&oe=57DF3F79&__gda__=1474329392_83b88030c94ec8611160c14161311db5" id="map">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Comments