Запуск функции с помощью прокрутки вверх

Question

Я хочу масштабировать DIV с некоторым содержимым, прокручивая колесико мыши.Прокрутка вверх должна приводить к увеличению и прокрутке вниз при уменьшении.Так что я знаю, что это возможно, потому что вы можете обнаружить дельту и вызвать функцию.Поэтому мне нужно знать, как это сделать.Вот моя попытка.

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

Я сделал нечто похожее на ответ Лукаса, но я считаю, что мой код немного более понятен и понятен.Я также использую пользовательские свойства CSS здесь, чтобы сохранить настройку и получение текущего размера шкалы чище и чуть более производительно.

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

Наконец, если бы это был код производственного уровня, я быпредлагаю вам газ слушатель wheel

Answer 2

пробовали ли вы привязывать колесо к самому элементу 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 + ")");
}