Javascript 在滚动条上放大或缩小HTML元素

我有一个浮动的

img

，用户可以用鼠标左键移动；但我还想在用户试图滚动图像时放大和缩小图像

我找不到合适的事件，例如

onscrollforward

和

onscrollbackward

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

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

---

我不完全理解你的问题，但我知道一种检测用户是否在上下滚动的方法

也许这个片段可以帮助你

window.onscroll=函数（e）{
//如果方向向下，则打印“false”；如果方向向上，则打印“true”
console.log（this.oldcroll>this.scrollY）；
this.oldcoll=this.scrollY；
}

.container{
位置：相对位置；
背景：#ccc；
宽度：500px；
高度：1500px；
填充：15px；
}
img{
位置：固定；
}

---

这是我将用于我的案例的确切代码：

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

const image=document.getElementById（'floatingImage'）；
image.zoom=1；
image.onwheel=函数_image\u onwheel（事件）{
event.preventDefault（）；
这[e.deltaY<0？'OnScrollForward'：'onscrollbackward']（）；
};
image.onScrollForward=函数image_uuOnScrollForward（）{
this.style.transform=`scale（${++this.zoom}）`；
};
image.onscrollbackward=函数_image\u onscrollbackward（）{
this.style.transform=`scale（${--this.zoom}）`；
};

@Rishab首先，我无法打开你的链接，这对我来说只是一个空白页。第二：我不想使用臃肿的jQuery或类似的东西。对不起，当我在

img

元素上分配

onscroll

时，这不起作用。我真正想要的是：（18+；只需单击此站点上的任何图像并尝试滚动。我甚至尝试在我的图像元素上设置

overflow:scroll

，结果是相同的。在这种情况下，您希望根据用户输入的滚动将图像放大。我的回答没有检查滚动用户输入。我将编辑我的答案，给我5分钟时间直到不起作用：它只是滚动我的页面，我没有得到控制台的输出（这不仅在Firefox中有效，在Chromium中也很有效。