How to prevent map scrolling when scroling ion-list?

Ionic Framework
1

I am developing a hotel booking app for mobile and desktop

this this the screenshot

image
image.jpg1920×857 731 KB

my problem this when I hover mouse over the card list and scroll using my scroll wheel the whole page is scrolling

image
image.png1920×857 100 KB

How to prevent this ?

I tried but it not working

also gave slot=“fixed” in mapelement div , but map stop loading

also gave scroll-“false” in mapelement div , but still map scrolls

My code

<ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
          <ion-menu-button autoHide="false"></ion-menu-button>
        </ion-buttons>
      <ion-title>Hotel Location</ion-title>
    </ion-toolbar>
 
</ion-header>
<ion-content scroll="false" slot="fixed">


    <ion-grid  > 
      <ion-row>
          <ion-col size="2">
              <ion-list   >
                <ion-item  *ngFor="let hotel of hotels">
                  <ion-card >
                    <ion-img src="{{hotel.image}}" ></ion-img>
                    <ion-card-header>
                        <ion-card-title>{{hotel.hotelName}}</ion-card-title>
                      <ion-card-subtitle>Chennai</ion-card-subtitle>
                    </ion-card-header>
                    <ion-card-content> 
                       
                        <ion-item>
                            <ion-label>
                              <h2>Economy</h2>
                              <h3>2 Beds | 0 Balcony</h3>
                              <p>Listen, I've had a pretty messed up day...</p>
                            </ion-label>
                            <ion-badge style="text-align: end" color="danger" slot="end">$100</ion-badge>
                
                          </ion-item>
                               
                    </ion-card-content>
              
              </ion-card>
              </ion-item>
                </ion-list>
          </ion-col>
        <ion-col scroll="false"  size="10">
            <div  #mapElement class="map"></div>

        </ion-col>
       
      </ion-row>
    </ion-grid>
  


     
</ion-content>


.map {
    height: 95%;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

export class ListHotelDesktopPage implements OnInit, AfterViewInit {
  latitude: any;
  longitude: any;
  @ViewChild('mapElement',null) mapNativeElement: ElementRef;
  hotels: any;
  map: any;

  

  constructor(private router: Router,private httpN: HTTP,http: HttpClient,private geolocation: Geolocation,public modalCtrl : ModalController,public ngZone: NgZone) {
   
    const url: string = 'https://jsonbase.com/ragesh/getHotels';

    http.get(url).subscribe((data: any) => {
      console.log('get', data.hotels);
      this.hotels = data.hotels;
    }, (error) => {
      console.log('get - ERROR', error);
    });

  
  }
    
//------------------


ngOnInit() {
}

ngAfterViewInit(): void {
  this.geolocation.getCurrentPosition().then((resp) => {
    this.latitude = resp.coords.latitude;
    this.longitude = resp.coords.longitude;
    this.map = new google.maps.Map(this.mapNativeElement.nativeElement, {
      center: {lat: -34.397, lng: 150.644},
      zoom: 6
    });
    
    const pos = {
      lat: this.latitude,
      lng: this.longitude
    };

   

   this.map.setCenter(pos);
  }).catch((error) => {
    console.log('Error getting location', error);
  });
}
async openModal(){
  const modal = await this.modalCtrl.create({
    component: ModalPagePage
  });
  return await modal.present();
}



markMap(hotel: any)
{
  //alert(name);


  const pos = {
    lat: hotel.hotelLatLng.lat,
    lng: hotel.hotelLatLng.lng
  };
  const icon = {
    url: 'assets/icon/favicon.png', // image url
    scaledSize: new google.maps.Size(50, 50), // scaled size
  };

  const marker = new google.maps.Marker({
    position: pos, //marker position
    map: this.map, //map already created
    title: hotel.hotelName,
    icon: icon //custom image
  });
  
  const contentString = '<div id="content" style="height: 100%;margin: 10;padding: 10;" >' +

'<h1 id="firstHeading" class="firstHeading">'+hotel.hotelName+'</h1>' +
'<div id="bodyContent" style="height: 100%;margin: 10;padding: 10;">' +
'<img src="'+hotel.image+'" width="200">' +
'<ion-button color="primary" id = "'+hotel.hotelName+'">BOOK Now</ion-button> '+
'<p> '+hotel.hotelDescription+' </p>' +
'</div>' +
'</div>';

let infoWindow2 = new google.maps.InfoWindow({
  content : contentString
  });
  google.maps.event.addListenerOnce(infoWindow2, 'domready', () => {
  document.getElementById(hotel.hotelName).addEventListener('click', () => {
 // this.openModal();
 this.router.navigateByUrl('/hotel-details');
  });
  });

marker.addListener('click', function() {
  infoWindow2.open(this.map, marker);

});
}
   
}

Please help me make only card list scrollable