@panzoom/panzoom does not work when cursor over element

Question

const pz = document.getElementById('panzoom');
    console.log(pz)
    const panzoom = Panzoom(pz, {canvas: true, maxScale:5})
    pz.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)

<script src="https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js"></script>
<div style="width:1000px; height:600px; border: 1px solid black;">
    <iframe id="panzoom"  style="width:500px; height:300px; border: 10px solid black;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiCNMl4OJrlzNToGd32IJd4RShAtxIMJb2hg&s"></iframe>
</div>

I am using this @panzoom/panzoom package to pan-zoom an iframe element. My code is like the following. However, I find that pan and zoom only works when mouse cursor is outside of the iframe. How can I make the pan and zoom still work even when the cursor is over the iframe element?

Answer 1

The answer is to add pointer-events: none in CSS for the iframe so it doesn't associate itself with click events on the image. And note as the iframe itself doesn't have pan zoom library you cannot set it from outside using the pan zoom js of the parent document.

Here is the code snippet:

const pz = document.getElementById('panzoom');
    console.log(pz)
    const panzoom = Panzoom(pz, {canvas: true, maxScale:5})
    pz.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)

iframe{
  pointer-events: none;
}

<script src="https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js"></script>
<div style="width:1000px; height:600px; border: 1px solid black;">
    <iframe id="panzoom"  style="width:500px; height:300px; border: 10px solid black;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiCNMl4OJrlzNToGd32IJd4RShAtxIMJb2hg&s"></iframe>
</div>

Now the cursor move shows up as expected.