scroll horizontale impossible sous "Safari" par JeromeBimont - page 1

Bonsoir , je débute un peu dans le monde de la création de site internet mais la je me heurte à un problème

auquel je ne trouve pas de solution.

Mon code fonctionne bien sous tous les navigateurs sauf Safari , quand je ré affiche la barre de scroll horizontal, je peut la sélectionner

et effectuer mon défilement horizontal mais celui ci ne fonctionne pas lorsque je veut utiliser la molette de la souris ou via un appareil IOS en

utilisant le slide avec les doigts. pourriez vous m'aidez à corriger ce malheur , merci d'avance . Cordialement kolak.

voici le code :

<!DOCTYPE html>
<html>
    <head>
	
	
        <meta charset="utf-8" />
		
        <title> probleme safari  </title>
		
	<style>
		html, body {height:100%;}
html, body, section, p {margin:0;}
#Conteneur-Central {overflow:hidden;height:100%;}
#wrapper {white-space:nowrap;height:100%;}
#Conteneur-Central section {position:relative;display:inline-block;vertical-align:top;width:100%;height:100%;color:#fff;transition:margin-left 1s ease;}
#Conteneur-Central section:nth-child(1) {background:pink;}
#Conteneur-Central section:nth-child(2) {background:black;}
#Conteneur-Central section:nth-child(3) {background:red;}
#Conteneur-Central section:nth-child(4) {background:black;}


	</style>
    </head>

<body>

<div id="Conteneur-Central">
	<div id="wrapper">
		<section>
		
	
		</section><!--
	 --><section>
	 	
			
	 	</section><!--
	 --><section>
	 	
			
	 	</section><!--
	 --><section>
	 		
		
	 	</section>

	</div>
</div>
	
	
	
	
<script type="text/javascript">	
	
	
	
function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}
function elementIndex(a,b){for(var i=0, l=a.length; i<l; i++){if (a[i]===b) return i;}}

var navLinks = document.querySelectorAll("#Conteneur-Central section a"),
	allSections = document.querySelectorAll("#Conteneur-Central section"),
	firstSection = document.querySelector("#Conteneur-Central>div>section:first-child"),
	currentIndex = 0, clicked = false;


function scrollSection(e){
	(e.stopPropagation()) ? e.stopPropagation() : e.cancelBubble;
	(e.preventDefault) ? e.preventDefault() : (e.returnValue = false);

	var cur = e.target || e.srcElement,
		positionMaxDebut = (currentIndex == 0 && (e.detail < 0 || e.wheelDelta > 0 || e.keyCode == 37 || e.keyCode == 38)),
		positionMaxFin = (currentIndex == allSections.length-1  && (e.detail > 0 || e.wheelDelta < 0 || e.keyCode == 39 || e.keyCode == 40) && !clicked),
		toucheNonGeree = e.keyCode < 37 || e.keyCode > 40;
	
	if (positionMaxDebut || positionMaxFin || toucheNonGeree) return;

	var	scrollNext = e.detail > 0 || e.wheelDelta < 0 || e.keyCode == 39 || e.keyCode == 40,
		targetElement = clicked ? document.getElementById(cur.hash.substring(1)) : allSections[scrollNext ? currentIndex+1 : currentIndex-1],
		targetIndex = elementIndex(allSections, targetElement);

	currentIndex = targetIndex;
	clicked = false;
	
	firstSection.style.marginLeft = "-"+ (currentIndex * 100) + '%';
}


for(var i=0, l=navLinks.length; i<l; i++){
	addEvent(navLinks[i], "click", function(e){
		clicked = true;
		scrollSection(e);
	}, false);
}

addEvent(document, "DOMMouseScroll", scrollSection, false);
addEvent(document, "mousewheel", scrollSection, false);
addEvent(document, "keyup", scrollSection, false);	
	
	</script>
    </body>
</html>

scroll horizontale impossible sous "Safari"

scroll horizontale impossible sous "Safari"

Supprimer

Modérer

Signaler le message aux modérateurs