overflow-y: Überbreiter Inhalt

Wer mal in die Verlegenheit kommen sollte, mit CSS und dem overflow arbeiten zu dürfen, wird sicher ein wenig drüber stolpern, wenn die Seite auch auf Safari laufen soll. Ich habe nur so aus Spaß auf dem Android Phone ein eigenes Projekt getestet und konnte keinerlei Scrollbalken entdecken. Alle übrigen Browser hatten keine Probleme. Ein Beispiel im Netz sollte euch Klarheit geben. Mit den verschiedenen Optionen sollten die Scrollbalken so wie auf dem Bild aussehen. Und nun testet mal den Link unter Safari. Vermutlich werdet ihr keine Scrollbalken finden. Die üblichen Tipps overflow=auto; funktionierten auch nicht.

Eine mögliche Lösung, die ich gefunden habe, besteht aus ein wenig Javascript und dem richtigen Aufruf im Quellcode.

 function isTouchDevice(){
	try{
		document.createEvent("TouchEvent");
		return true;
	}catch(e){
		return false;
	}
}
function touchScroll(id){
	if(isTouchDevice){ //if touch events exist...
		var el=document.getElementById(id);
		var scrollStartPos=0;
		document.getElementById(id).addEventListener("touchstart", function(event) {
			scrollStartPos=this.scrollTop+event.touches[0].pageY;
			event.preventDefault();
		},false);
		document.getElementById(id).addEventListener("touchmove", function(event) {
			this.scrollTop=scrollStartPos-event.touches[0].pageY;
			event.preventDefault();
		},false);
	}
}

Den ganzen Spaß aktiviert ihr direkt im Body Tag.

  body onload="touchScroll('scrollMe')"

Natürlich muss noch die DIV ID an euren Quelltext angepasst werden. Dazu schaut euch einfach den Quelltext des Beispiels an.