fixed Element verliert den Kontakt zum umgebenden Container

[Linuchs]

Moin,

Folgeproblem meiner Chor-Seite.

Die Partitur soll unter dem roten Strich durchrollen. Wenn ich den absolute mache, rollt der mit der Partitur weg, mache ich ihn fixed, kümmert er sich nicht um seinen umgebenden Container (hellgelb).

Steht in der Mitte er Seite, aber überdeckt auch den anderen Inhalt. Schönheitsfehler, wie könnte ich den beseitigen?

<div style="position:relative;width:100%;height:40em;overflow-x:sccroll;overflow-y:hidden;border:1px solid #080;background:#ffc;">
  <!-- sekrechter Strich -->
  <div id=strich style="position:fixed;left:0;width:50%;top:0;height:100%;border-right:2px solid #f00;"></div>
  <img id=rolle src="../noten/You_took_the_words_right_out_of_my_mouth_Tonikum.svg" alt=Notenrolle style="margin-left:50%;height:100%;" />
</div>

Zusatzproblem: Beim Vergrößern der FF-Seite mit [Strg][+] oder [Strg][Mausrad] verschwindet die SVG samt horizontalem Scrollbalken, verkleinern funktioniert. Bei [Strg][0] sind beide wieder da.

[Rolf B]

Hallo Linuchs,

du solltest den Strich mit position:absolute in der Mitte des hellgelben div positionieren können - aber dann muss das img allein gescrollt werden (was bspw. mit transform:translate gehen könnte).

Wie schiebst Du das Bild denn im Moment?

Wenn Du den hellgelben Container schiebst, dann schiebst Du den Strich mit, klar. In dem Fall bräuchtest Du einen weiteren Container als Scroll-Hülle. Hier hast Du ggf. noch Potenzial zur Optimierung, weil Du ja meintest, das Bild könnte man segmentieren damit es nicht so besoffen und damit völlig breit ist.

<div id="scrollcontainer">
   <div id="leitlinie">
   <div id="musik">
      <img src="teil1.png" loading="lazy">
      <img src="teil2.png" loading="lazy">
      <img src="teil3.png" loading="lazy">
      <img src="teil4.png" loading="lazy">
      <img src="teil5.png" loading="lazy">
      ...
   </div>
</div>

So kannst Du die Images mit fixer Breite nebeneinander setzen und lazy load bestellen (was dann hoffentlich der Browser ordentlich handelt). Und das musik-div schiebst Du entweder über einen Margin, den Du gegen minus unendlich laufen lässt, oder durch CSS Transform mit einem translateX(...) drunter weg.

Rolf