0

I'm currently having the following problem: It's an Angular project that is still giving me a few problems on the mobile view.

I have a list of messages. As soon as I scroll up in this list, I want a button to be displayed so that I can get back to the bottom of the list. On the desktop view this works well (scroll event). For the mobile view I use the "touchmove" event (because the scroll-event doesn't fire). Based on both events, the scroll distances are calculated and the button is triggered. I use the "fromEvent"-Method of rxjs.

However, there are more divs (childs) inside the list div (parent) and my "touchmove" event (TouchEvent) always refers to the innermost element.

Is there any way to always refer to the parent element when a touchmove event is triggered?

TypeScript:

@ViewChild('messages', {static: true}) messagesElementRef: ElementRef;
// ...
fromEvent(this.messagesElementRef.nativeElement, 'touchmove', {passive: true}).pipe(auditTime(500))
  .subscribe((event: any) => this.scrollEventCalculator(event));

HTML:

<div #messages class="messages">
  <ng-container ...>
    <div *ngFor="let message of messages$ | async as messages ...">
      <ng-container ...>
        <custom-message [message]="message"></message>
      </ng-container>
    </div>
  </ng-container>
</div>

As soon as I'm in the mobile view, the Chrome DevTools always show me the innermost DOM element as target. I would have thought that the "messages" div is accessed, since the @ViewChild is defined for it.

noobhoch100
  • 1
  • Do you explain it, touch move event happens then what do you wan ? – GRD Dec 15 '21 at 11:17
  • It sounds like you might need to use `currentTarget` instead of `target`: https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property – Steve Holgado Dec 17 '21 at 14:07
  • I could solve the problem: instead of 'touchmove' I used 'scroll'. Because of that, the correct div is used. However, the scroll-Event wasn’t fired, because the height of the container was wrong by CSS (height: 100%), so no scroll event was triggered. Now everything works again. Thanks! – noobhoch100 Dec 18 '21 at 15:10

0 Answers0