FlexSlider с Woocommerce: предотвращение вертикального касания горизонтальных ползунков

с WooCommerce 4.2, на iOS FlexSlider (v2.7.2) показывает ошибку с горизонтальным ползунком: когда фокус находится на ползунке, когда пользователь проводит пальцем влево или вправо, вертикальная прокрутка все еще активна, есть некоторый уровень вертикального перемещения . Это заставляет ползунок отскакивать.

Вы можете увидеть ошибку в этом видео: https://youtu.be/bM8zcv3ciTo.

EDIT: Мой вопрос похож на этот, но связанный с 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/


ios carousel woocommerce storefront flexslider
person Louis    schedule 02.10.2020    source источник
comment
Ваше встроенное видео не загружается… Теперь единственное значение, которое вы меняете, это controlNav… пытались ли вы добавить параметр $options['smoothHeight'] = true;… вы можете посмотреть на jquery.flexsider.js включены в WooCommerce, где у вас есть все настройки в конце кода js.   -  person LoicTheAztec    schedule 26.10.2020
comment
Я обновил ссылку на видео. Спасибо @LoicTheAztec, я попробую другие варианты и дам вам знать.   -  person Louis    schedule 02.11.2020
comment
кто-нибудь еще видит этот баг?   -  person Louis    schedule 05.11.2020
comment
Это было решено? Если это так, и мой ответ был вам полезен, отметьте его как принятый. В противном случае, если вам нужны дополнительные разъяснения, просто скажите об этом.   -  person Eliezer Berlin    schedule 11.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

Изменить: адаптация решения карусели для сов приведет к следующему коду:

//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 показывает, что оно работает правильно, и в нем нет настоящей ошибки. Каждый раз, когда ползунок не двигается в вашем видео, это потому, что

а. Он скользит вертикально, а не горизонтально, или

б. Он скользит в направлении, в котором не может скользить, потому что петля отключена, и он находится на первом элементе.

Эффект отскока — это нормально, когда вы прокручиваете страницу вверх в iOS. При желании вы можете отключить эффект подпрыгивания с помощью обходного пути, подобного этому:

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

body {
  width: 100vw;
  height: 100vh;
  position:relative;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
person Eliezer Berlin    schedule 10.11.2020