Empêcher google carte infowindow de faire défiler hors de sa propre fenêtre

Question

J'ai essayé d'empêcher le défilement de la page Web lors du défilement dans un infowindow. Mon infowindow a un div activé par défilement à l'intérieur et une fois qu'il atteint le fond de la div il fait défiler la page Web.

Je sais comment faire pour un div normal en utilisant jQuery en changeant le style css 'overflow' comme vous pouvez le voir ci-dessous.

$('.classOfMyDiv').on('mouseover', function(event) { 
    $('body').css('overflow', 'hidden'); 
} 
$('.classOfMyDiv').on('mouseout', function(event) { 
    $('body').css('overflow', ''); 
} 

mais il semble que cela ne fonctionne pas lorsque vous utilisez un div dans une infowindow. Quelqu'un a réussi à le faire? J'ai également essayé d'utiliser un écouteur google pour l'infowindow pour les événements mouseover et mouseout mais pas de chance aussi.

Answer 1

Vous pouvez utiliser les écouteurs d'événements de Google Maps sur l'InfoWindow et sur la carte pour désactiver le défilement du corps.

var infowindow = new google.maps.InfoWindow(); 

// This event is fired when the <div> containing the InfoWindow's content is attached to the DOM. 
google.maps.event.addListener(infowindow, 'domready', function() { 

    toggleBodyOverflow('hidden'); 
}); 

// This event is fired when the close button was clicked. 
google.maps.event.addListener(infowindow, 'closeclick', function() { 

    toggleBodyOverflow('auto'); 
}); 

// This event is fired when the user clicks on the map (and therefore closes the InfoWindow). 
google.maps.event.addListener(map, 'click', function() { 

    toggleBodyOverflow('auto'); 
}); 

Pourquoi l'écouteur d'événement carte click? Parce qu'il existe deux façons de fermer une InfoWindow: en utilisant le bouton de fermeture — ou — en cliquant sur la carte. Comme l'InfoWindow n'a pas un événement close correct, vous devrez utiliser les deux.

et la fonction pour activer le trop-plein du corps:

function toggleBodyOverflow(param) { 
    $('body').css({ 
     overflow: param 
    }); 
} 

JSFiddle demo