✔ In einem "popup" div das Hintergrund scrolling ausschalten

[Hattrijck]

Hallo zusammen,

Ich habe eine tolle Frage an euch :
Ich habe eine Seite mit einem sehr langen Inhalt = Die Seite ist scrollbar. Nun kann man auf etwas Klicken, zB ein Wort und es öffnet sich ein Div mit weiterem Conten, welches ebenfalls scrollbar ist und zB 300x300px ... Wenn ich nun dieses div scrolle und unten am div ankomme und weiter am Scrollrad drehe, beginnt der Browser damit den Hintergrund - die Hauptseite - zu scrollen.

Gibt es eine Möglichkeit, das scrollen kurzzeitig anzuhalten... Bis halt das Popup geschlossen wird?

overflow-y: hidden will ich nicht!

Grüsse
Hattrijck

Sorry falls dies in einen anderen Bereich gehört... War mir nicht sicher evtl. isses auch eher JS oder CSS...

 

[tombe]

Und was spricht gegen die Lösung mit overflow?

 

[Hattrijck]

Dadurch dass die Scrollbar verschwindet, gibt es Probleme mit der Hintergrundbreite... Gibt es nicht so etwas wie ein Fokus auf ein div und nur da kann man dann scrollen?^^

 

[tombe]

Ist gar nicht so einfach.

Du könntest eventuell das scroll-Event mit jQuery abfangen und dort prüfen ob ein entsprechender DIV-Container sichtbar ist.

In diesem Fall positionierst du mit scrollTo(x, y) die Seite selber wieder genau da wo sie war.

Ich habe bisher leider das Problem das ich die Position nicht ermittelt bekomme, "window.pageYOffset" geht nicht.

Vielleicht hift es dir trotzdem weiter.

 

[Hattrijck]

Sehr gute Anregung... Ich werde es später probieren und berichten.

 

[tombe]

So ich widerspreche mir jetzt mal selber pageYOffset gibt es doch und damit lässt es sich aus lösen.

$(document).ready(function(){
var x = 0;
var y = 0;

$(window).scroll (function(){
	if (document.getElementById("div").style.display == "block") {
	 	window.scrollTo(x, y);
	}
});

$("#klick").click (function(){
	if (document.getElementById("div").style.display == "none") {
		document.getElementById("div").style.display = "block";
		y = window.pageYOffset;
		x = window.pageXOffset;
	} else {
		document.getElementById("div").style.display = "none";
	}
});

});

"#klick" ist einfach ein Link mit dem ich meinen DIV-Container ein- oder ausblende.

Die Variablen x und y speichern beim Einblenden die aktuelle Position der Scrollbars und wenn dann gescrollt wird, wird das Fenster gleich wieder auf diese Position gesetzt.

 

[Hattrijck]

Vielen Dank !

Ich habe jetzt aber schon gegoolget und falls es in Zukunft jemandem helfen wird:
http://jsbin.com/ixura3/3
Oben rechts kann man den Code einsehen/editieren