Das horizontale Anbringen eines Elements funktioniert nur auf dem Desktop, nicht auf Mobilgeräten ⇐ HTML

[Guest]

Bitte beachten Sie: Sie können JavaScript verwenden (auch wenn die Prämie etwas anderes sagt), ich bin dafür offen, danke. Das Hauptproblem ist auch nicht die Breite der Bildlaufleiste, sondern der Leerraum rechts neben der Kopfzeile in der mobilen Ansicht.
Beim Versuch, ein Layout mit einer Kopfzeile zu erstellen, die wie gewohnt vertikal von der Seite scrollen. Wenn man jedoch die HTML-Bildlaufleisten verwendet (wichtig, dass es sich um die HTML-Bildlaufleisten handelt, damit man nicht nach den horizontalen Bildlaufleisten suchen muss, werden die HTML-Bildlaufleisten immer am unteren Rand des Ansichtsfensters angezeigt), wobei die Kopfzeile horizontal hängen bleibt. Es handelt sich um ein Layout, bei dem der Inhalt breiter als das Ansichtsfenster ist, man möchte aber, dass die Kopfzeile immer horizontal angezeigt wird, sie aber vertikal über den Bildschirm scrollen kann, um Platz auf dem Bildschirm zu schaffen.
Wenn ja Scrollt nach rechts, neben der Kopfzeile ist in der Regel ein leerer, freier Bereich. Ich möchte, dass die Kopfzeile horizontal bleibt (aber wie bereits erwähnt vertikal scrollen).
Hier können Sie sehen, wann Ich scrolle horizontal auf dem Desktop, die goldene Kopfzeile bleibt erhalten an der Stelle und füllt die gesamte Breite aus.


Aber sobald Sie auf Mobilgeräte umsteigen, funktioniert es nicht mehr. Wenn ich horizontal scrolle, sehen Sie hier die weiße Lücke, anstatt dass der Header an Ort und Stelle bleibt:


Dieses Code-Snippet wechselt nicht zur mobilen Ansicht, daher müssen Sie es kopieren und in eine einfügen Datei und probieren Sie es selbst aus, wenn Sie sehen möchten, was auf Mobilgeräten vor sich geht:

Code: Select all

* {
box-sizing: border-box;
}
html {
overflow-y: scroll;
width: max-content;
}
body {
margin: 0;
}
header {
background: goldenrod;
border-right: 1px solid red;
position: sticky;
left: 0;
width: calc(100vw - 15px);
}
main {
width: 120vw;
height: 120vh;
background: gray;
}




 Header


Main stuff
Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong

Dieses Code-Snippet wechselt NICHT zur mobilen Ansicht und zeigt das Problem an, dient nur der Vollständigkeit.

Code: Select all

* {
box-sizing: border-box;
}

html {
overflow-y: scroll;
width: max-content;
}

body {
margin: 0;
}

header {
background: goldenrod;
border-right: 1px solid red;
position: sticky;
left: 0;
width: calc(100vw - 12px);
}

main {
width: 200vw;
height: 120vh;
background: gray;
}

Code: Select all

Header, should stick horizontally, scroll vertically as usual



Main stuff
Paragraph that is very wide, so wide it should go beyond the width of the viewport, loooooooooooooooooooooooooooooooooooooooong