fixed Element verliert den Kontakt zum umgebenden Container

[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