Anker funktioniert nicht richtig

[Rolf B]

Hallo envoy,

ja, das ist mir bei einer Testseite, die ich aus deinem Code gemacht habe, auch passiert.

Etwas, was eigentlich Deine Bringschuld wäre.

Wenn Du mit Tab durch die Links im Inhalt läufst, scrollt der MemberWrapper und kollidiert mit Deiner eigenen Steuerung. Das kannst Du nur lösen, wenn Du selbst das Scrolling nutzt.

Im Prinzip brauchst Du den MemberSlider nicht. Lege alle Member im MemberWrapper nebeneinander (z.B. durch eine Flexbox) und gib dem MemberWrapper diese CSS-Eigenschaften:

#MemberWrapper {
 display: flex;
 margin: auto;         /* Kann, muss nicht */
 flex-flow: row;
 width: 100%;
 max-width: 1000px;
 overflow:hidden;
 scroll-snap-type: x mandatory;
 scroll-behavior: smooth;

Im Moment machst Du den Wrapper im JS sichtbar, indem Du display:block setzt. Entweder änderst Du das in flex, oder verwende das hidden-Attribut zum Verstecken.

Die Bilder setzt Du so:

.Member {
   flex: 0 0 100%;
   scroll-snap-align: center;
}

Keine width, kein Float. Das Nebeneinandersetzen übernimmt die Flexbox und die Breite kommt aus dem 3. Parameter der flex-Eigenschaft.

Jetzt kannst Du deine Links/Rechts-Bilder in <a href="#Member1"></a> einhüllen. Klickt man den Link, positioniert der Browser das Member mit der entsprechenden ID in den sichtbaren Bereich. scroll-behaior:smooth animiert es, und die Kombi aus scroll-snap-type und scroll-snap-align sorgt dafür, dass das Scrolling nicht zwischen zwei Membern stehen bleibt. JavaScript? Braucht man nicht, oder nur, um die Galerie sichtbar zu machen.

Es kann übrigens den Browser in die Knie zwingen und irrsinnige Ladezeiten verursachen , wenn Du zu viele Bilder und Galerien auf der Seite hast. Beschäftige Dich mit lazy loading. Wenn der Anwender allerdings zu viele Bilder angeschaut hat, entsteht der Speicherbedarf am Ende doch. Überlege also gut, was du tust und denk auch an kleine, speicherarme Mobilchen.

Rolf