通过向上滚动触发功能

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 侦听器

通过向上滚动触发功能

Trigger a function by scrolling up

html

javascript

scroll

scale