вертикальная прокрутка заблокирована Hammer.js

я пытаюсь сделать приложение с Intel XDK (сборка 2727), и сейчас моя проблема в том, что я не могу прокручивать по вертикали, когда у меня есть список, превышающий размер экрана. я отследил проблему до Hammer.js. Этот плагин, кажется, используется для боковой панели. Итак, я попытался прокомментировать исходный код и вуаля, он работает. Но мне нужна боковая панель и, следовательно, Hammer.js. После исследования выяснилось, что у других возникает такая же проблема, и наиболее распространенным решением для этого, по-видимому, является overflow-y: scroll;, я тоже пробовал, но не повезло. Итак, как я могу решить эту проблему, не обращаясь к исходным данным Hammer.js, а, например, сделав исключение на листах CSS?


html css phonegap-build hammer.js intel-xdk
person Selçuk    schedule 23.11.2015    source источник
comment
Попробуйте отключить вертикальную панораму молота и слушателей смахивания.   -  person Thomas    schedule 23.11.2015
comment
где они размещены? есть несколько файлов. Hammer.js, sidebar.js, swipe.js, swipe-hammer.js, jquery.hammer.js и т. д.   -  person Selçuk    schedule 23.11.2015
comment
Я не знаю Intel XDK. Боковая панель или основной контент, кажется, имеют экземпляр молотка для регистрации панорамирования или пролистывания. Обновите экземпляр, настроив прослушиватель на прослушивание только по горизонтали. Я думаю, вам нужно найти часть, где экземпляр создается в Intel SDK.   -  person Thomas    schedule 23.11.2015

Ответы (3)


arrow_upward
8
arrow_downward

Используйте этот стиль в CSS элемента DOM при использовании события Hammer (откат JS):

touch-action: pan-y !important;

Вы увидите, что вертикальная прокрутка работает.

См. документы о свойстве touch-action: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

person Jhosua Espinoza    schedule 18.03.2020

arrow_upward
4
arrow_downward

Нам нужно отключить сжатие, вращение и панорамирование событий HammerJS или нам нужно обрабатывать вертикальную прокрутку с помощью HammerJS. hammejs добавляет touch-action: none; css к элементу, к которому вы применяете события Hammejs.

чтобы отключить эти события в Angular, вы можете использовать следующую конфигурацию:

    export class MyHammerConfig extends HammerGestureConfig {
        overrides = <any>{
            // override hammerjs default configuration
            'swipe': { direction: Hammer.DIRECTION_HORIZONTAL },
            'pinch': { enable: false },
            'rotate': { enable: false },
            'pan': { enable: false }
        };
    }
person Abhay    schedule 03.04.2019

arrow_upward
3
arrow_downward

Хорошо, я нашел (частичное) решение. В swipe-hammer.js ".upage" подключен к молотку во всех направлениях. Изменил его на DIRECTIONS_HORIZONTAL, и это решило проблему на данный момент. Основная проблема в том, что Хаммер подключен ко всей странице, а не только к сайдбару. Не знаю, правильный ли это способ.

В любом случае, большое спасибо @Thomas за подсказку.

person Selçuk    schedule 23.11.2015
comment
Рад, что вы его нашли :) И я надеюсь, что это не сломает другие вещи. - person Thomas; 23.11.2015