Question

在iOS上使用WooCommerce 4.2时，FlexSlider（v2.7.2）显示了带有水平滑块的错误：当用户将焦点放在滑块上（当用户向左或向右滑动时），垂直滚动仍处于活动状态，存在一定水平垂直运动。这会使滑块“反弹”。

您可以在此视频中看到错误：https://youtu.be/bM8zcv3ciTo

编辑：我的问题类似于this one，但与Flexslider有关。

我在functions.php中有这个

/*PRODUCT PAGE FlexSlider Options*/
add_filter( 'woocommerce_single_product_carousel_options', 'filter_single_product_carousel_options' );
function filter_single_product_carousel_options( $options ) {
    if ( wp_is_mobile() ) {
        $options['controlNav'] = true; // Option 'thumbnails' by default
        $options['direction'] = "horizontal";
        $options['slideshow'] = false; // Already "false" by default
    }
    return $options;
}

有什么想法在焦点放在Flexslider上时如何防止这种垂直滚动？

有人也有这个错误吗？

我安装了仅包含Wordpress和WooCommerce的测试站点，并且此错误在这里，因此它与插件无关：http://woo.makemy.biz/produit/produit-de-test/

Answer 1

编辑：修改owl carousel解决方案将导致代码如下：

//You should replace ".myFlexslider" with an appropriate class.

jQuery('.myFlexslider').data('flexslider').vars.before = function(){
    jQuery('body').css('overflow', 'hidden');
};
jQuery('.myFlexslider').data('flexslider').vars.after = function(){
    jQuery('body').css('overflow', '');
};

应该起作用。 https://codepen.io/Terrafire123/pen/YzWRXOJ

不可能通过PHP进行此操作，因为PHP并未公开执行此操作所需的API。

您应该知道，通常不建议在滑动滑块时防止垂直滚动，因为这会导致滑动滑块烦人地滚动过去。

原始答案：Flickity和Flexsider似乎都出现了这个问题，这似乎表明这不是问题，而是用户的问题。

仔细查看您所拥有的Youtube视频，似乎表明该视频可以正常运行，并且没有真正的错误。每次滑块在视频中不移动，是因为

a。他在垂直滑动，而不是水平滑动，或者

b。他朝着无法滑动的方向滑动，因为循环已禁用，并且他位于第一个元素。

在iOS中滚动到页面顶部时，反弹效果是正常的。如果需要，您可以使用以下变通方法来禁用弹跳效果：

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100vh;
  position:relative;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

Woocommerce的FlexSlider：防止在水平滑块上进行垂直滑动触摸

1 个答案: