Как я могу предотвратить полный масштаб страницы события mousewheel в Javascript?

Question

Я хочу использовать трекпад и событие wheel для обновления масштаба элемента DOM.Он работает, как и ожидалось, однако в некоторых браузерах он также выполняет полное масштабирование страницы.

Я хочу сохранить обновление масштаба, но хочу предотвратить полное масштабирование страницы.

Я читал этодобавление e.preventDefault в событие wheel предотвратит это.У меня было это, но это, кажется, не работает.

Вот мой кодовый блок: https://codepen.io/ChucKN0risK/full/JqwrVe

Answer 1

Событие, связанное на уровне документа (window.document, window.document.body или window), рассматривается как пассивное и не может быть предотвращено.Вы должны указать, что событие не является пассивным, если { passive: false } является третьим параметром вашей функции addEventListener.См. эту ссылку для получения дополнительной информации.

В вашем случае:

document.addEventListener('wheel', function(e) {
    e.preventDefault();
    e.stopPropagation();

    if (e.ctrlKey) {
        var s = Math.exp(-e.deltaY / 100);
        scale *= s;
    } else {
        var direction = 1; //natural.checked ? -1 : 1;
        tx += e.deltaX * direction;
        ty += e.deltaY * direction;
    }
    var transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
    box.style.webkitTransform = transform;
    box.style.transform = transform;
}, {
    passive: false // Add this
});

Более того, он не будет работать на codepen из-за использования iframe в качестве событияпривязывается к iframe, а не к самой странице codepen.

Answer 2

e.preventDefault();  e.stopPropagation();

Попробуйте использовать оба из них