Горизонтальное размещение элемента работает только на настольных компьютерах, а не на мобильных устройствах. ⇐ Html

[Anonymous]

Обратите внимание: вы можете использовать JavaScript (хотя в награде указано иное), я открыт для этого, спасибо. Кроме того, основная проблема заключается не в ширине полосы прокрутки, а в пустом пространстве справа от заголовка в мобильном представлении.
Пытаюсь создать макет с заголовком, которые прокручивают страницу вертикально, как обычно. Но если вы используете полосы прокрутки HTML (важно, что это полосы прокрутки HTML, поэтому не нужно искать полосы горизонтальной прокрутки, полосы прокрутки HTML всегда отображаются в нижней части области просмотра), а заголовок застрял горизонтально. Это макет, в котором контент шире области просмотра, но желательно, чтобы заголовок всегда отображался горизонтально, но позволял ему прокручиваться по вертикали за пределы экрана, занимая экранное пространство.
Когда такой вариант прокручивается вправо, рядом с заголовком обычно есть пустое открытое пространство, я хочу, чтобы заголовок оставался закрепленным горизонтально (но, как упоминалось ранее, прокручивайте вертикально).
Здесь вы можете увидеть, когда Я прокручиваю рабочий стол по горизонтали, золотой заголовок остается внутри. место и заполняет всю ширину.


Но как только вы переключитесь на мобильный телефон, он перестанет работать, при горизонтальной прокрутке вы увидите белый пробел вместо того, чтобы заголовок остался на месте:


Этот фрагмент кода не переключается на мобильный вид, поэтому вам придется скопировать и вставить его в файл и попробуйте сами, если хотите увидеть, что происходит на мобильных устройствах:

Код: Выделить всё

* {
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

Этот фрагмент кода НЕ переключается на просмотр на мобильных устройствах и не отображает проблему, он предоставлен только для полноты картины.

Код: Выделить всё

* {
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;
}

Код: Выделить всё

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

Подробнее здесь: https://stackoverflow.com/questions/793 ... not-mobile