Question

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

<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>

Answer 1

通过执行此操作解决了问题：

在touchmove中搜索jquery.elevatezoom.js个事件，并从中删除所有preventDeafult()。

Answer 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（）;”并替换为上面的代码。将最大宽度：640px更改为所需的查看端口。

希望能帮助到某人

在elevatezoom.js data-zoom-image的图像上滚动不能在移动设备上工作

2 个答案: