Увеличение или уменьшение HTML-элемента при прокрутке

Question

У меня есть плавающее img, которое пользователь может перемещать с нажатой левой кнопкой мыши;но я также хочу увеличить или уменьшить изображение, когда пользователь пытается его прокрутить.

Я не могу найти подходящие события для этого, например onscrollforeward и onscrollbackward.

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

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

Answer 1

Я не совсем понял ваш вопрос, но я знаю способ определить, прокручивает ли пользователь вверх или вниз.

Возможно, этот фрагмент поможет вам.

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>

РЕДАКТИРОВАТЬ Я немного изменил JavaScript, теперь он сможет помочь вам.

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

Это точный код, который я буду использовать для моего случая:

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 })`;
};