Wie platziere ich ein Div-Zentrum des Fensters nach dem Scrollen [geschlossen]

8

Ich habe ein div, das auch nach dem Scrollen in der Mitte des Fensters sein sollte. Wie man es erreicht

Ссылка

    
Rajasekar 06.04.2010, 06:45
quelle

4 Antworten

27

Sie können es mit einer festen Breite in der Mitte und mit negativen Rändern mit der Hälfte der Breite und der Hälfte der Höhe tun. Also für ein div mit der ID your_div , das 200x200 groß ist, würden Sie tun:

%Vor%     
reko_t 06.04.2010, 07:09
quelle
2

Ich habe es mir selbst angeschaut und dieser Beitrag kam zuerst auf. Mit weiteren Recherchen fand ich stattdessen diesen Link, den ich für die beste Cross-Browser-Lösung halte:

Using jQuery, um ein DIV auf dem Bildschirm zu zentrieren

Um jQuery zu verwenden, um die IE6-Probleme zu überwinden, nehmen Sie einfach $ (window) .scrollTop () und $ (window) .scrollLeft () in Betracht.

Hoffe, das hilft.

Steve

    
Steven Cheng 26.08.2010 14:28
quelle
2

Ich schlage folgende Lösung vor:

1) In JS, wenn Sie ein Fenster anzeigen möchten:

%Vor%

2) in CSS: .mein-fenster

%Vor%     
BotanMan 19.06.2013 07:34
quelle
1

Wenn Sie IE 6 unterstützen müssen, müssen Sie das div-Element an den Rumpf anhängen und die Position als "absolut" festlegen. Machen Sie das Positionsattribut des Körperelements als "relativ". Und wenden Sie den Rest der von reko_t vorgeschlagenen Stile an. Das sollte beim Scrollen das div in der Mitte halten.

Abgesehen davon würde ich Ihnen vorschlagen, einen weiteren Fall zu betrachten, wenn Sie ein div in der Mitte der Seite positionieren möchten. Wenn die Größe des Ansichtsfensters kleiner ist als das der Position, die Sie in der Mitte positionieren, sehen Sie beim Scrollen den gleichen Teil des Bereichs, bis Sie die Größe des Fensters größer als die des Bereichs dividieren.

Um diesen Fall zu lösen, sollten Sie eine JavaScript-Lösung anstelle einer reinen CSS-Lösung wählen. Sie sollten einen Fenstergrößen-Listener definieren. Wenn das Ansichtsfenster des skalierten Fensters kleiner ist, positionieren Sie das div in der linken oberen Ecke des Ansichtsfensters und deaktivieren Sie den Onscroll-Listener. Wenn das Ansichtsfenster des skalierten Fensters größer ist als das div, sollte der Onscroll-Listener die von reko_t vorgeschlagenen Stile anwenden.

    
Mandai 06.04.2010 09:22
quelle

Tags und Links