时间戳

首页 > 解决方案 > 在不滚动的元素上使用 onscroll

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

问题描述

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

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>

提琴手

唯一的问题是，当元素本身不滚动时，您无法检测到用户是向上还是向下滚动（或者检测是否正在使用滚轮） 。

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

标签： javascript

解决方案

有一个事件叫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中有一个很好的例子

推荐阅读