Удар молотка JS не работает на элементах со свойством переполнения css - PullRequest
Новая
       11

Удар молотка JS не работает на элементах со свойством переполнения css

0 голосов
/ 13 февраля 2020

РЕДАКТИРОВАТЬ : Фрагмент отлично работает, когда включен в вопрос, но не при редактировании; что заставило меня понять, что это связано с нижележащими контейнерами, которые могут прокручиваться ... Я проверил это на своем телефоне, и молот отлично работает на небольших участках, у которых нет свойства overflow.
Я обновил фрагмент кода до отразите это.

Вопрос: как заставить его работать с контейнерами, которые нужно прокручивать вертикально?

Я строю навигацию с помощью прокрутки в Angular PWA. У меня он работал на Chrome рабочем столе, но он не работал на моем телефоне. Когда я попробовал сенсорный эмулятор в Chrome devtools, он сошел с ума в зависимости от ориентации / устройства, в основном ничего не обнаруживая. panleft и panright работают незначительно лучше, но по какой-то причине полностью разбивают молоток (возможно, из-за того, что я не отменил его, через некоторое время он просто перестает обнаруживать без ошибок).

Что я делаю неправильно ?

Фрагмент ниже ведет себя аналогично при использовании с эмуляторами устройств в Chrome devtools 

const hammer = new Hammer(document.documentElement);
hammer.on('swipeleft swiperight', event => {
  console.log(event.type);
});
body,
html {
  height: 100%;
}

.content {
  margin-top: 20%;
  width: 100%;
  height: 80%;
  background: orange;
  overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
Can touch this
<div class="content">Can't touch this (on mobile / emulator)</div>

Фактический код 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(
    private gameService: GameService,
    private routerService: RouterService
  ) {}

  ngOnInit() {
    this.gameService.gameInit();

    const hammer = new Hammer(document.documentElement);
    hammer.on('swipeleft swiperight', event => {
      if (event.type === 'swiperight') {
        this.routerService.navNext();
      } else if (event.type === 'swipeleft') {
        this.routerService.navPrev();
      }
    });
  }
}
...