<html>
<head>
<title>Document</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background: pink;
position: absolute;
overflow: hidden;
}
.wrapper {
display: flex;
position: absolute;
width: 100%;
height: 100%;
background: blue;
cursor: move;
touch-action: none;
}
.test {
width: 300px;
height: 300px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="test">
p
</div>
</div>
</div>
<script>
var zoomPanDiv = document.querySelector(".wrapper");
var hammer = new Hammer(zoomPanDiv);
var scale = 1;
var lastScale = 1;
var posX = 0;
var posY = 0;
var lastPosX = 0;
var lastPosY = 0;
hammer.get('pinch').set({ enable: true });
hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammer.on('pinch', (e) => {
scale = Math.max(1, Math.min(lastScale * e.scale, 3));
zoomPanDiv.style.transform = `scale(${scale}) translateX(${posX}px) translateY(${posY}px)`;
});
hammer.on('pinchend', function () {
lastScale = scale;
});
hammer.on('pan', (e) => {
posX = Math.max(-zoomPanDiv.clientWidth * (scale - 1), Math.min(0, lastPosX + e.deltaX));
posY = Math.max(-zoomPanDiv.clientHeight * (scale - 1), Math.min(0, lastPosY + e.deltaY));
zoomPanDiv.style.transform = `scale(${scale}) translateX(${posX}px) translateY(${posY}px)`;
console.log(e)
});
hammer.on('panend', (e) => {
lastPosX = posX;
lastPosY = posY;
});
</script>
</body>
</html>
I have a problem, when zoomed in it can't be scrolled down
On mobile
Video.mp4