在 elevatezoom.js data-zoom-image 的图像上滚动无法在移动设备中工作答案

【问题标题】：scrolling not working in mobile on image of elevatezoom.js data-zoom-image在 elevatezoom.js data-zoom-image 的图像上滚动无法在移动设备中工作
【发布时间】：2021-12-28 20:09:22
【问题描述】：

我在产品详细信息页面中使用以下代码缩放图像，但是当您想要滚动缩放插件的图像并且您用手指站在图像上时无法在手机中向上或向下滚动

<div class="relative d_inline_b m_bottom_10 qv_preview d_xs_block" style="height: 440px">
     <img title="Silver Diamond Band Ring" itemprop="image" style="cursor:zoom-in;position: relative;top: 50%;transform: translateY(-50%);" id="zoom_image" src="/img/product/thumb/1510161025300784.jpg" data-zoom-image="/img/product/big/1510161025299740.jpg" class="tr_all_hover" alt="Silver Diamond Band Ring">
     <a href="/images/preview_zoom_1.jpg" class="d_block button_type_5 r_corners tr_all_hover box_s_none color_light p_hr_0"><i class="fa fa-expand"></i></a>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

问题解决了：

在jquery.elevatezoom.js 中搜索touchmove 事件并从移动视图中删除preventDeafult()。

【讨论】：

【解决方案2】：

我刚刚遇到了同样的问题，您的回答非常有帮助，但是通过删除 preventDefault() 会从桌面视图中删除 elevatezoom 的功能。

我只会删除使用 javascript mediamatch 的移动设备：

                if (window.matchMedia("(max-width: 640px)").matches) {
                /* The viewport is less than, or equal to, 640 pixels wide */
                } else {
                /* The viewport is greater than 640 pixels wide */
                e.preventDefault();
                }

要进行上述更改，请转到您的 elevatezoom.js 并找到“e.preventDefault();”并替换为上面的代码。将 max-width: 640px 更改为所需的视口。

希望对某人有所帮助

【讨论】：