Zoom-in or Zoom-out HTML Element on Scroll

Question

I have a floating img that user can move around with pressed left mouse button; but I also want to zoom-in and zoom-out an image when user tries to scroll it.

I can't find proper events for this like onscrollforeward and onscrollbackward .

/* Here I want to zoom-in an image.
*/ image.onscrollforeward = function( e ) { ... };

/* And here to zoom-out.
*/ image.onscrollbackward = function( e ) { ... };

Answer 1

I didn't fully understand your question but i do know a way to detect if the user is scrolling up or down.

Maybe this snippet can help you out.

 window.onscroll = function(e) { // print "false" if direction is down and "true" if up console.log(this.oldScroll > this.scrollY); this.oldScroll = this.scrollY; }

 .container { position: relative; background: #ccc; width: 500px; height: 1500px; padding: 15px; } img { position: fixed; }

 <div class="container"> <img src="https://placekitten.com/200/200" alt="pixelkitten"> </div>

EDIT I've changed the javascript a bit, this should now be able to help you.

const image = document.querySelector('img');

image.onscrollforeward = function( e ) { ... };

image.onscrollbackward = function( e ) { ... };    

image.onwheel = function _image__onwheel( e ) {
    e.preventDefault();
    if (e.deltaY < 0) this.onscrollforeward( e );
    else this.onscrollbackward( e );
};

Answer 2

This is the exact code I will use for my case:

const image = document.getElementById('floatingImage');

image.zoom = 1;

image.onwheel = function _image__onwheel( event ) {
    event.preventDefault();
    this[ e.deltaY < 0 ? 'onscrollforeward' : 'onscrollbackward' ]();
};

image.onscrollforeward = function _image__onscrollforeward( ) {
    this.style.transform = `scale(${ ++this.zoom })`;
};

image.onscrollbackward = function _image__onscrollbackward( ) {
    this.style.transform = `scale(${ --this.zoom })`;
};