<style>
.product-template {
display: flex;
align-items: flex-start;
position: relative;
}
.left {
width: 50%; /* Adjust as needed */
position: sticky;
top: 0;
height: 100vh; /* Full viewport height */
display: flex;
align-items: center;
justify-content: center;
}
.left img {
max-width: 100%;
height: auto;
}
.right {
width: 50%; /* Adjust as needed */
overflow-y: auto;
}
</style>
<script>
document.addEventListener(“DOMContentLoaded”, function () {
const left = document.querySelector(“.left”);
const right = document.querySelector(“.right”);
// Function to handle the scroll sync
function handleScroll() {
const leftBottom = left.getBoundingClientRect().bottom;
const rightBottom = right.getBoundingClientRect().bottom;
if (leftBottom <= window.innerHeight) {
right.style.overflowY = “auto”;
} else {
right.style.overflowY = “hidden”;
}
}
// Add scroll event listener
window.addEventListener(“scroll”, handleScroll);
});
</script>