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

【问题标题】：FlexSlider with Woocommerce: prevent vertical swipe touch on horizontal sliders带有 Woocommerce 的 FlexSlider：防止水平滑块上的垂直滑动触摸
【发布时间】：2021-01-18 00:42:11
【问题描述】：

使用 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 上时如何防止这种垂直滚动吗？

有人也有这个问题吗？

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

【问题讨论】：

您的嵌入式视频无法加载...现在您要更改的唯一值是controlNav...您是否尝试添加选项$options['smoothHeight'] = true;...您可以查看jquery.flexsider.js included in WooCommerce在js代码末尾有所有设置。
我更新了视频链接。谢谢@LoicTheAztec，我会尝试其他选项并让您知道。
还有其他人看到这个错误吗？
这个问题解决了吗？如果是这样，并且我的回答对您有帮助，请将其标记为“已接受”。否则，如果您需要更多说明，请直接说出来。

标签： ios woocommerce carousel flexslider storefront

【解决方案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 视频似乎表明它工作正常，并且没有真正的错误。每次滑块在您的视频中没有移动，那是因为

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

b.他正在向一个他不能滑动的方向滑动，因为循环被禁用并且他在第一个元素处。

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

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

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

【讨论】：