Désactiver le scroll dans les Iframe de Google Map ou des visites virtuelles [Niveau intermédiaire]

• 29 décembre 2016
• Steeve

Dans ce tutoriel je vous propose une technique pour désactiver le scroll dans une iframe comme par exemple les cartes Google Map ou encore les visites virtuelles. Si vous avez déjà copié / collé le code donné par Google pour partager une carte ou une visite virtuelle sur un site web, vous avez du rencontrer le même problème que moi, quand vous scroller (vous essayer de descendre dans le site) sur la carte le scrolle s’arrête et c’est la carte qui fait un zoom.

Donc l’objectif de ce tutoriel c’est de désactiver cette fonction. Mais si nous la désactivons, aucun scroll ne sera plus possible. Ma solution est pas de la désactiver complètement mais plutôt temporairement. Elle sera réactivée dès que l’internaute cliquera dans l’iframe.

Partager une carte google map ou une visite virtuelle.

Nous allons dans mon exemple faire une page avec une visite virtuelle. Dans une page web je mets simplement le code de l’iframe HTML. Vous pouvez copier le code dans la page d’exemple qui contient la visite virtuelle du stade Mayol à Toulon.
Dans cette page si vous essayer de scroller sur la visite virtuelle votre page ne descend pas, par contre vous zoomer dans la visite virtuelle.

Encapsuler la carte Google Map ou la visite virtuelle

Maintenant que vous avez la base il faut encapsuler la visite virtuelle pour mon exemple, mais ça fonctionne aussi si vous avez mis à la place une carte Google Map.

Encapsuler votre iframe avec une « div » ayant pour class « box-iframe ».

	

		<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sfr!2sfr!4v1483008833511!6m8!1m7!1s5qwpl5d4P2YAAAQvPGo53w!2m2!1d43.11922249786512!2d5.936334549175172!3f133!4f0!5f0.7820865974627469" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
	

Puis ajouté le code CSS ci-dessous :

.box-iframe > iframe {
  max-width: 100%;
  width: 100%;
  margin-bottom: -5px;
}
.scrolloff {
  pointer-events: none;
}

Puis maintenant on ajoute un peu de JavaScript avec jQuery pour faire fonctionner notre système.

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript">
		/* ==============================================
	    GOOGLE MAP & IFRAME SCROLL OFF
	    =============================================== */
	    $('.box-iframe > iframe').addClass('scrolloff');		
	    // set the mouse events to none when doc is ready
	    
	    $('.box-iframe').on("mouseup",function(){          		
	        // lock it when mouse up
	        $(this).children('iframe').addClass('scrolloff');
	    });
	    
	    $('.box-iframe').on("mousedown",function(){        		
	        // when mouse down, set the mouse events free
	        $(this).children('iframe').removeClass('scrolloff');
	    });
	    
	    $('.box-iframe > iframe').mouseleave(function () {		
	        // because the mouse up doesn't work... 
	        $(this).addClass('scrolloff');            		 
	        // set the pointer events to none when mouse leaves the map area
	        // or you can do it on some other event
	    });
	</script>

Comme vous pouvez le voir mon code JavaScript ne fait qu’ajouter et enlever des class CSS. Il n’y a rien de très compliqué, l’essentiel étant dans le CSS avec la class « scrolloff » qui permet d’empêcher les évènements du pointer.

Vous pouvez tester sur la page d’exemple.

Désormais quand vous scrollé sur la visite virtuelle vous n’effectué plus de zoom et vous descendez bien dans la page. Pour réactiver le zoom il faut simplement cliquer une fois dans l’iframe (visite virtuelle dans mon exemple).

Voici un autre exemple avec cette fois ci une carte Google Map. Pas grand changement, a part le code de l’iframe. Ça fonctionne d’ailleurs avec plusieurs carte google Map ou avec plusieurs visites virtuelles.

J’espère que ce tutoriel vous sera utile, si il l’est, pensez à le partager ;-)