CSS: Das horizontale Anbringen eines Elements funktioniert nur auf dem Desktop, nicht auf Mobilgeräten
Posted: 15 Jan 2025, 16:10
Ich versuche, ein Layout mit einer Kopfzeile zu erstellen, die wie gewohnt vertikal von der Seite wegscrollt. 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.
Wann Wenn man nach rechts scrollt, ist neben der Kopfzeile 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 Wenn ich auf dem Desktop horizontal scrolle, bleibt die goldene Kopfzeile 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:
Dieses Code-Snippet wechselt NICHT zur mobilen Ansicht und zeigt das Problem an, dient nur der Vollständigkeit.
Wann Wenn man nach rechts scrollt, ist neben der Kopfzeile 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 Wenn ich auf dem Desktop horizontal scrolle, bleibt die goldene Kopfzeile 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
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