I have a large image that i put in container
I zoom in on the image, but when i try scroll to the ends (both up left and down left, i cant see the end of the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
width: 600px;
height: 400px;
overflow: hidden;
border: 1px solid black;
position: relative;
}
.image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.image-wrapper img {
transition: transform 0.3s ease;
display: block;
max-width: none;
}
</style>
</head>
<body>
<div class="container">
<div class="image-wrapper">
<img id="zoomImage" src="images/tri4K.jpg" alt="Large Image">
</div>
</div>
<script>
const container = document.querySelector('.container');
const imageWrapper = document.querySelector('.image-wrapper');
const image = document.getElementById('zoomImage');
let zoomed = false;
container.addEventListener('click', (event) => {
const rect = container.getBoundingClientRect();
const clickX = event.clientX - rect.left;
const clickY = event.clientY - rect.top;
if (!zoomed) {
const zoomFactor = 1.5;
const imageWidth = image.naturalWidth;
const imageHeight = image.naturalHeight;
image.style.transform = `scale(${zoomFactor})`;
const newWidth = imageWidth * zoomFactor;
const newHeight = imageHeight * zoomFactor;
const offsetX = (newWidth - container.offsetWidth) / 2;
const offsetY = (newHeight - container.offsetHeight) / 2;
const scrollX = (clickX / container.offsetWidth) * newWidth - clickX;
const scrollY = (clickY / container.offsetHeight) * newHeight - clickY;
setTimeout(() => {
imageWrapper.scrollTo(scrollX, scrollY);
}, 300);
zoomed = true;
} else {
image.style.transform = 'scale(1)';
setTimeout(() => {
imageWrapper.scrollTo(0, 0);
}, 300);
zoomed = false;
}
});
</script>
</body>
</html>