Подскажите плз есть ли какой либо способ сделать скрол не по у координатах а по z и при етом не использовать канвас? проблема в том что если нету полос прокрутки то и ивент onscroll не вызывается и соответственно я не могу ничего делать, а именно хочу делать зум елементам на странице.
3 ответа
Можно использовать событие wheel
var zoom = 1;
$(document).ready(function(){
$('.zoom').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
zoom += 0.1;
} else {
zoom -= 0.1;
}
$(this).css('transform', 'scale('+ zoom +')');
});
});
.zoom {
width: 200px;
height: 200px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="zoom"></div>
Да, ребята из коментов правы, скрол ивент только по факту а за wheel я совсем забыл он же срабатывает на прокрутку колеса мышки.
-
Пожалуйста, не отвечайте фразой «спасибо». Вместо этого, отметьте лучший ответ как принятый (галка напротив выбранного ответа). — из очереди проверок 27 июн 2020 в 0:14
-
@aleksandrbarakin, никто не написал просто ответ, они все предлагали в комментарии 27 июн 2020 в 18:50
Вот Вам пример
let box = document.querySelector('div')
window.addEventListener('wheel', evt => {
if (Math.sign(evt.deltaY) === 1) {
box.style.transform = `scale(${+box.style.transform.replace(/[^0-9]/g,'') - 1})`
} else {
box.style.transform = `scale(${+box.style.transform.replace(/[^0-9]/g,'') + 1})`
}
})
div {
width: 300px;
height: 300px;
background: green;
}
<div style="transform: scale(1)"></div>
transform: scale(value)
;wheel
вроде бы