带有 Woocommerce 的 FlexSlider：防止水平滑块上的垂直滑动触摸

Question

使用 WooCommerce 4.2，在 iOS 上，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 上时防止这种垂直滚动吗？

有人也有这个bug吗？

我安装了一个只有 Wordpress 和 WooCommerce 的测试站点，错误就在这里，所以它与插件无关：http : //woo.makemy.biz/produit/produit-de-test/

Answer 1

编辑：调整猫头鹰轮播解决方案将产生如下所示的代码：

//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;
}