1

I am attempting to zoom in/out relative to mouse pointer position. What I am expecting is similar to what can be found here. Zooming should be centered at the pointer position using CSS transform-origin and scale. When using the mousewheel to zoom, it works as expected at first. However, the moment I zoom and move the mouse pointer and attempt to zoom again, the divs I am zooming into move all over the page. I seem to have the math wrong. Or am I not understanding how the transform-origin works? How would I fix? Working code can be found here but I have also included it below.

    <div id="viewport">
        <div class="layer" id="stage">
        </div>
    </div>

$(document).mousewheel(function(event) {
    oldScale = scale

    scaleBy = 1.01
    let delta = event.deltaY
    let newScale = delta < 0
                 ? oldScale / scaleBy
                 : oldScale * scaleBy;

    scale = newScale

    let offset = document.querySelector('#stage').getBoundingClientRect();

    var offsetX = event.clientX - $('#stage').offset().left;
    var offsetY = event.clientY - $('#stage').offset().top;


    $('.layer').css('transform-origin', Math.round(offsetX/oldScale)+'px '+Math.round(offsetY/oldScale)+'px')
    $('.layer').css('transform', 'scale('+newScale+')')
})
shpeilin
  • 21
  • 2
  • remove 'transport-origin' and see if things are still jumping around. Also add ```backface-visibility: hidden;``` to the parent of layer div to prevent some shake on the scale. – Spangle Nov 13 '19 at 05:34
  • Thanks for the backface-visibility suggestion. Keeping the transform-origin is essential though to be able to zoom relative to pointer position. – shpeilin Nov 13 '19 at 05:36
  • Is the scale part working? – Spangle Nov 13 '19 at 06:02
  • Yes, the scale part works. The transform-origin is the part that is causing the issues. – shpeilin Nov 13 '19 at 06:03
  • I am also experiencing this issue exactly as OP here. I found [this answer](https://stackoverflow.com/a/60234045/13222359), but it uses `translate` instead of `transform-origin` to offset for the mouse position, and it doesn't quite fit my use case. – PsiKai Aug 06 '22 at 03:19

0 Answers0