Seite springt nach oben beim Öffnen von Untermenüs

Frage

Ich habe den Konfigurator per Web Component eingebettet. Wenn ich ein Untermenü auswähle (z.B. Farbe oder Zubehör), springt die Seite immer automatisch nach oben. Auch auf dem Handy wird der Konfigurator anders dargestellt – man sieht nur das 3D-Modell und muss weit scrollen, um die Auswahlmöglichkeiten zu sehen.

Antwort

Dieses Verhalten hängt mit den CSS-Styles Ihrer Website zusammen – insbesondere mit der CSS-Eigenschaft contain: paint auf dem main-Element.

Lösung 1: contain:paint deaktivieren

Fügen Sie in Ihre CSS-Datei (oder einen Style-Block auf der Seite) folgendes ein:

main {
  contain: none !important;
}

Dadurch wird verhindert, dass der Browser den Bereich „abschneidet" und sich beim Öffnen von Untermenüs falsch verhält.

Lösung 2: Mobile Höhe im Layout anpassen

Damit der Konfigurator auf mobilen Geräten besser nutzbar ist und man nicht so weit scrollen muss, passen Sie das Layout im K3 an:

Öffnen Sie den Layout-Editor: Klicken Sie im Editor Ihres Konfigurators oben beim Desktop-Symbol auf das Stift-Icon.
Vorlage auswählen: Klicken Sie auf „Als Vorlage nutzen", um das Layout bearbeitbar zu machen.
CSS ergänzen: Fügen Sie an der entsprechenden Stelle folgende Regel hinzu:

@container (max-width: 700px) {
  .k3-layout-paginated-right {
    height: 100vh;
  }
}

Warum passiert das?

Die CSS-Eigenschaft contain: paint wird von manchen Website-Themes verwendet, um die Rendering-Performance zu verbessern. Sie kann jedoch dazu führen, dass Dropdown-Menüs und Overlays innerhalb des Konfigurators abgeschnitten werden oder unerwartetes Scroll-Verhalten auslösen.

Web Component korrekt einbinden

Die Standard-Einbettung per Web Component sieht so aus:

<k3-view lang="de" app="IHRE-APP-ID"></k3-view>
<script type="module" src="https://k3.objectcode.de/app/index.js"></script>

Weiterführende Informationen

Konfigurator einbinden – Alle Einbettungsmethoden im Überblick
Design und Layout anpassen – Layout-Editor und CSS-Anpassungen

Frage​

Antwort​

Lösung 1: contain:paint deaktivieren​

Lösung 2: Mobile Höhe im Layout anpassen​

Warum passiert das?​

Weiterführende Informationen​

Verwandte Themen​