Question

我想通过滚动鼠标滚轮来缩放DIV的内容。向上滚动应导致放大，而向下滚动则导致缩小。所以我知道这是可能的，因为您可以检测到deltaY并可以触发函数。所以我需要知道如何做到。这是我的尝试。

function scale(event) {
     var y = event.deltaY;
     if (y > 0) {
       document.getElementById('scalediv').style.transform = scale(1);
     }
   }

#scalediv {
  transform: scale(0.4)
 }

<div id="scalediv">
Lorem
</div>

Answer 1

您是否尝试过在div本身上装订轮？

document.getElementById("scalediv").addEventListener("wheel", resize);

function resize(event){
  console.log(event);
}

然后查看event.deltaY是负还是正：-）

没有边界（最小和最大值）的简单解决方案，我相信您可以自己解决这个简单问题

<div id="scalediv" style="transform: scale(0.4)">
   Lorem
</div>

-

document.getElementById("scalediv").addEventListener("wheel", resize);

function resize(event) {
  console.log(event);
  var scaledDiv = document.getElementById("scalediv").style.transform;
  var regExp = /\(([^)]+)\)/;
  var scaleValue = regExp.exec(scaledDiv);
  var valueAsNumber = Number(scaleValue[1]);
  var newValue = valueAsNumber + 0.1;
  if (event.deltaY > 0) {
    newValue = valueAsNumber - 0.1;
  }
  document
    .getElementById("scalediv")
    .setAttribute("style", "transform: scale(" + newValue + ")");
}

Answer 2

我做了与Lukas回答类似的事情，但是我相信我的代码更加直接和可读。我也在这里使用CSS custom properties，以保持当前刻度尺尺寸的设置和获取更整洁，性能更高。

const div = document.querySelector('div')
const scaleVariable = '--scale-size'

window.addEventListener('wheel', scrollHandler, {
  passive: true
})

function scrollHandler (e) {
  // Find out which direction we scrolled in:
  var dir = Math.sign(e.deltaY)

  // Since dir can sometimes be -0 or 0, exclude those scenarios with this if clause
  if (dir) {
    // Get the existing CSS custom property
    const currentSize = div.style.getPropertyValue(scaleVariable)
    // Modify it in the direction of the scroll
    let newSize = parseFloat(currentSize || 1, 10) + dir * 0.1
    // Set size boundaries
    if (newSize < 0.3) newSize = 0.3
    else if (newSize > 5) newSize = 5
    // Set the new size through the property
    if (newSize) div.style.setProperty(scaleVariable, newSize.toFixed(2))
  }
}

您可以在此处观看现场演示： https://jsfiddle.net/andreasvirkus/m5w38sz9/2/

在CSS中，只有这一部分是相关的（其余只是用于演示目的的样式）：

div {
  --scale-size: 1;
  transform: scale(var(--scale-size));
}

最后，如果这是生产级代码，我建议您throttle wheel侦听器

向上滚动触发功能

2 个答案: