swiper icon indicating copy to clipboard operation
swiper copied to clipboard

Zoom to the point of mouse cursor with mouse wheel

Open rammba opened this issue 1 year ago • 0 comments

Check that this is really a bug

  • [X] I confirm

Reproduction link

https://nww622.csb.app/

Reproduction code

<div class="swiper" onwheel="onWheel(event)">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
      var swiper = new Swiper(".swiper", {
        zoom: true
      });

      function onWheel(e) {
        const zoomIn = event.deltaY < 0;
        if (zoomIn) {
          swiper.zoom.toggle(event);
        } else {
          swiper.zoom.out();
        }
      }
    </script>

Bug description

There is no out of box solution for scroll zooming based on mouse cursor position, so I needed to use swiper.zoom.toggle(event); However, I want to use also zooming with double click, which is supported by enabling zoom functionality.

My intention for using swiper.zoom.toggle() was following code. That solution works fine until I click somewhere on the image (either random clicking or moving zoomed image). When click on the image occurres, zooming by wheel will always be to the last clicked point.

For me, it looks like this condition is making the problem since it uses coordinates of latest click, not coordinates from forwarded event (WheelEvent in my case).

I also tried to set touchMoveStopPropagation & touchStartForcePreventDefault to true, which didn't help at all.

My last resort was trying to disable zoom feature (swiper.zoom.disable()) before touchStart event, but I didn't know how to do it.

Reproduction steps

  • Click somewhere on the image
  • Try to zoom to some part of image with mouse wheel

Expected Behavior

Image is zoomed to the point of mouse cursor.

Actual Behavior

Image is zoomed to the last clicked point.

Swiper version

11.0.3

Platform/Target and Browser Versions

Windows 10, Chrome v119.0.6045.124

Validations

  • [X] Follow our Code of Conduct
  • [X] Read the docs.
  • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • [ ] I'm willing to open a PR

rammba avatar Nov 14 '23 12:11 rammba