CSS HTML/CSS/Javascript overflow Scrollproblem

yaegi · 3. Juli 2013

Ich versuche mich mal verständlich auszudrücken:

Ich habe zwei ineinanderliegende Wrapper. wrapper_01 ist fix in Größe und Position. Ich möchten den wrapper_02 incl. sämtlicher Inhalte innerhalb des äußeren Wrappers vertikal verschieben. Stark vereinfach sieht das so aus:

HTML:

<body>
    <div id="wrapper_01">
        <div id="wrapper_02">
            <div id="content"></div>
        </div>
    </div>
</body>

Mal angenommen beide sind 500px breit und hoch und liege auf denselben x und y Positionen. wrapper_01 steht auf overflow-y: scroll. Vergrößere ich wrapper_02 in der Höhe, kann ich diesen incl. Inhalt wunderbar nach unten scrollen.

Jetzt kommt das Problem:
Verschiebe ich (egal ob hart per css oder javascript) wrapper_02 innerhalb von wrapper_01 nach oben, also in negativer y-Richtung, kann ich einfach nicht mehr nach oben scrollen.

Ein kleines Beispiel, wo man es vllt eher nachvollziehen kann.
Nehmen wir den ersten Kasten auf folgender Seite und schieben den Inhalt um sagen wir 20px nach oben:
http://de.selfhtml.org/css/eigenschaften/anzeige/overflow.htm

Dann kann ich dann zwar den restlichen nicht sichtbaren Inhalt nach unten scrollen, aber nicht mehr die 20px nach oben!

Wo ist da der (Denk)Fehler?

thx
yaegi

Daaron · 3. Juli 2013

Soweit ich weiß ist es einfach nicht möglich, ins Negative zu scrollen, zumindest nicht mit den regulären Browser-Scrollbars.
Da selbige eh Scheiße aussehen und nicht geskinnt werden können: Überleg dir eine reine JS-Lösung... oder noch besser: Scrolle nicht. Ist meist einfach kein gutes Design, wenn Dinge in Dingen scrollen.

Znrl · 3. Juli 2013

Also ich meine man kann immer nur runter und nach rechts scrollen.

Bei deinem Fall müsste ja der Scrollbalken quasi am Anfang schon irgendwie mittig sein, damit man auch hoch scrollen kann.

Ich wüsste nicht wie das mit HTML/CSS geht.

Vtl. mit Anker oder nach dem laden per JavaScript runter "scrollen", dann hättest du den Effekt.

Aber mir scheint das irgendwie unnötig. Wieso soll es gut sein am Anfang schon Hochscrollen zu können?

yaegi · 3. Juli 2013

Ist meist einfach kein gutes Design, wenn Dinge in Dingen scrollen.

So ist es ja auch nicht angedacht

Wieso soll es gut sein am Anfang schon Hochscrollen zu können?

Man soll nicht am Anfang schon scrollen können

So siehts momentan aus: klick

Zum refreshen muss man leider nochmal die ganze Seite neuladen, weil momentan nur das "Öffnen" der einzelnen Inhalte aktiv ist.
Einfach auf einen der weissen Balken klicken, dann versteht Ihr mein Problem! Das was nach oben geschoben wird, ist dann eben einfach weg. Es wäre halt nett wenn man da durch Scrollen wieder drankommt.

Daaron · 3. Juli 2013

Warum so umständlich und das Rad zum drölfzillionsten Mal neu erfinden? Nimm ein Accordion: http://mootools.net/demos/?demo=Accordion

Oder schieß User ohne CSS3-Fähigkeit in den Wind und setz auf :target

Znrl · 3. Juli 2013

So in der Art ist halt eher für Menüs, bei dir scheint der Inhalt ja mit drin zu sein. Müste man schauen wie gut das in Groß Funktioniert.

http://www.cssplay.co.uk/menus/cssplay-media-accordian.html
http://www.cssplay.co.uk/menus/cssplay-radio-concertina.html

Suche

CSS HTML/CSS/Javascript overflow Scrollproblem

yaegi

Commodore

Daaron

Fleet Admiral

Znrl

Lieutenant