Disable Sheet Modal drag while scrolling the modal content

Ionic Framework
#1

Hello, I’ve recently upgraded to Ionic 6 and have to have a scrollable area inside of the sheet modal. I don’t have a working example I can share but in the Ionic example component I basically have this highlighted section scrolling within my modal:

modal-example
modal-example708×758 73.6 KB

The problem is, when I scroll on my emulator, the “drag” event that moves the sheet modal up and down is also activated. So as I scroll the content up or down, the modal itself also moves up and down a bit.

Is there any way to disable the drag events when scrolling interior content in the sheet modal? Or restrict the drag events to just the handle?

I tried canDismiss in my modal controller but that really only keeps it from closing, I can still drag up to the final breakpoint while I’m just scrolling the content.

Any help would be greatly appreciated, thanks!

#2

Found a solution for this if anyone in the future is interested. In the Angular Component I’m using in the Modal Controller, I just grabbed an element inside the template and did the following:

const scrollcontainer = this.element.nativeElement.querySelector(this.scrollContainerClass);

scrollcontainer.ontouchmove = function (e) {
    e.stopPropagation();
};

The stop propagation prevents the touchmove event from bubbling up to the sheet modal just fine. As long as you have areas outside of the scroll container the user can still click on to drag, the sheet modal should still work as desired. I tested it out on iOS and Android emulators and seems to be behaving as I want it to.

Cheers.

3 Likes
#3

thanks for sharing :blush:

#4

Hey, I tried your implementation but it did not work.

 <IonModal
        isOpen={showModal}
        initialBreakpoint={0.2}
        breakpoints={[0.2, 0.9]}
        backdropDismiss={false}
        backdropBreakpoint={0.3}
        style={{}}
        onIonModalDidDismiss={() => setShowModal(false)}>
        <IonHeader
            translucent>
            <IonToolbar>
              <IonTitle>{modalTitle}</IonTitle>
              <IonButtons slot="end">
               <IonButton onClick={() => { setShowModal(false); setModalState(ModalStates.closed)}}>Close</IonButton>
              </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent
          onTouchMove={(e) => {e.stopPropagation()}}
          >
             <IonList>
              <IonItem>
                <IonLabel>Label</IonLabel>
              </IonItem>
              ^ This gets repeated a bunch of times
        </IonList>
    </IonContent>
</IonModal>

Did I do it wrong / is there a different way I should do it?

#5

@adamfreid it is not working. May you please provide updated your answer with code? There is no ‘ontouchmove’.

#6

i had the same issue, using angular, i just putted the (touchmove) event to the cdk-virtual-scroll (any angular element has it) and it worked for me:

<cdk-virtual-scroll-viewport itemSize="30" (touchmove)="virtualscrolled($event)">
  <ion-list [inset]="true" lines="full">
    <ion-item button detail color="light" 
    *cdkVirtualFor="let result of searchResults (click)="onClickListItem(result)">
      <ion-avatar slot="start">
        <ion-img [src]="'../../../assets/images/'+result.img"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>{{result.name}}</h2>
      </ion-label>
    </ion-item>
  </ion-list>
</cdk-virtual-scroll-viewport>

And then in the .ts file:

virtualscrolled(event: any) {
    event.stopPropagation();
}