javascript - 在不滚动的元素上使用 onscroll

Question

所以我有一个元素，我希望能够使用鼠标上的滚轮放大和缩小。我认为解决这个问题的一个好方法是这样的:

JavaScript:

var container = document.getElementById("container"),
    zoom = document.getElementById("zoom");
var x = 0, lastScrollTop = 0;
const zoomWidth = zoom.getBoundingClientRect().width;
// I want the container to be the one that is targeted because
// sometimes the zoom element will be offset horizontally by too much
container.onscroll = function(e){
    e.preventDefault();
    var scrollTop = this.scrollTop;
    x += (scrollTop < lastScrollTop ? 0.1 : -0.1);

    zoom.style.width = (zoomWidth * x) + "px";
    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}

HTML:

<div id="container">
    <div id="zoom"></div>
</div>

JsFiddle

唯一的问题是，当元素本身不滚动。

那么，如何在实际上不滚动的元素上使用滚轮进行缩放呢？干杯。

Answer 1

有一个名为wheel的事件

您可以在元素上附加滚轮事件监听器

el.addEventListener('wheel', function(event){
  //do your job here 
});

滚轮事件中的可用属性

    {
    altKey: false
    bubbles: true
    button: 0
    buttons: 0
    cancelBubble: false
    cancelable: true
    clientX: 345
    clientY: 154
    composed: true
    ctrlKey: false
    currentTarget: div
    defaultPrevented: false
    deltaMode: 0
    deltaX: -0
    deltaY: -125
    deltaZ: 0
    detail: 0
    eventPhase: 2
    fromElement: null
    isTrusted: true
    layerX: 89
    layerY: 61
    metaKey: false
    movementX: 0
    movementY: 0
    offsetX: 90
    offsetY: 62
    pageX: 345
    pageY: 154
    path: (5)[div, body, html, document, Window]
    relatedTarget: null
    returnValue: true
    screenX: 822
    screenY: 491
    shiftKey: false
    sourceCapabilities: null
    srcElement: div
    target: div
    timeStamp: 171662.21500000005
    toElement: div
    type: "wheel"
    wheelDelta: 150
    wheelDeltaX: 0
    wheelDeltaY: 150
    which: 0
    x: 345
    y: 154
}

属性deltaX，deltaY足以计算

mdn check here 中有一个很好的例子