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