Остановка увеличения уменьшения при достижении определенных размеров JavaScript

Question

У меня есть скрипт который при прокрутке колесика мыши делает так что объект начинает масштабироваться.

Баг заключается в том что, нет ограничения в масштабирование, объект становится супер маленьким/большим, так что он даже пропадает из виду.

Пожалуйста помогите

<div id="test"><img src="фото.png" width="1760px" height="1760px"> </div>
    <script>
        function addOnWheel(elem, handler) {
            if (elem.addEventListener) {
                if ('onwheel' in document) {
                    // IE9+, FF17+
                    elem.addEventListener("wheel", handler);
                } else if ('onmousewheel' in document) {
                    // устаревший вариант события
                    elem.addEventListener("mousewheel", handler);
                } else {
                    // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
                    elem.addEventListener("MozMousePixelScroll", handler);
                }
            } else { // IE8-
                test.attachEvent("onmousewheel", handler);
            }
        }

        var scale = 1;

        addOnWheel(test, function(e) {

            var delta = e.deltaY || e.detail || e.wheelDelta;

            // отмасштабируем при помощи CSS
            if (delta > 0) scale += 0.05;
            else scale -= 0.05;

            test.style.transform = test.style.WebkitTransform = test.style.MsTransform = 'scale(' + scale + ')';

            // отменим прокрутку
            e.preventDefault();
        });

   </script>

Answer 1

Вам будет достаточно установить максимальный и минимальны scale и добавить проверку на выходе:

function addOnWheel(elem, handler) {
  if (elem.addEventListener) {
    if ("onwheel" in document) {
      elem.addEventListener("wheel", handler)
    } else if ("onmousewheel" in document) {
      elem.addEventListener("mousewheel", handler)
    } else {
      elem.addEventListener("MozMousePixelScroll", handler)
    }
  } else {
    test.attachEvent("onmousewheel", handler)
  }
}

let scale = 1

addOnWheel(test, function(e) {
  const delta = e.deltaY || e.detail || e.wheelDelta
  const min_scale = 0 // замените значение на нужное
  const max_scale = 1 // замените значение на нужное

  if (delta > 0) {
    scale = scale >= max_scale ? max_scale : scale + 0.05
  } else {
    scale = scale <= min_scale ? min_scale : scale - 0.05
  }

  test.style.transform = test.style.WebkitTransform = test.style.MsTransform = "scale(" + scale + ")"
  e.preventDefault()
})

<div id="test"><img src="фото.png" width="1760px" height="1760px"></div>

Answer 2

if (delta > 0) scale += 0.05;
else scale -= 0.05;

↓

if (delta > 0) {
  scale = Math.min(scale + 0.05, 3);
} else {
  scale = Math.max(scale - 0.05, 0.5);
}

↓ (можно, но не факт, что нужно: слишком запутано)

scale = Math.max(  Math.min(scale + Math.sign(delta) * 0.05, 3),  0.5  );

Math.sign возвращает 1 или -1

Answer 3

const elements = document.querySelectorAll('.circle');

window.onwheel = wheelHandle;

function wheelHandle(e) {
    const deltaState = e.deltaY > 0;
    elements.forEach(element => scaleElementHandle(element, deltaState));
}

function scaleElementHandle(element, deltaState) {
    const computedStyle = window.getComputedStyle(element);

    const webKitCSSMatrix = new WebKitCSSMatrix(computedStyle.transform || computedStyle.webkitTransform);

    let scale = webKitCSSMatrix.a;

    deltaState
        ? scale < 2 && (scale += 0.1)
        : scale > 0.5 && (scale -= 0.1);

    element.style.transform = `scale(${scale})`;
}

body {
    overflow: hidden;
}

.circle {
    width: 100px;
    height: 100px;
    background-color: gray;
    border-radius: 50%;
    position: absolute;
    transition: transform .1s;
}

.circle--1 {
    transform: scale(1);
    left: 50%;
    top: 50%;
    background-color: #3498db;
}
.circle--2 {
    transform: scale(1.5);
    left: 25%;
    top: 25%;
    background-color: #2ecc71;
}
.circle--3 {
    transform: scale(0.5);
    left: 75%;
    top: 25%;
    background-color: #e74c3c;
}
.circle--4 {
    transform: scale(3);
    left: 15%;
    top: 75%;
    background-color: #9b59b6;
}

<div class="circle circle--1"></div>
<div class="circle circle--2"></div>
<div class="circle circle--3"></div>
<div class="circle circle--4"></div>

БЛОГ НА HUSL

Остановка увеличения уменьшения при достижении определенных размеров JavaScript

Ответы (3 шт):