Прикрепленный заголовок прокручивается при вводе ⇐ Html

[Anonymous]

У меня есть прикрепленный заголовок с полем поиска. Чтобы обеспечить теги привязки (

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

[url=#section]

) не скрывает содержимое за верхней частью заголовка, я добавил следующий CSS.

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

html {
scroll-padding-top: 48px
}

Однако, если прикрепленный заголовок включает в себя ввод, вся страница будет прокручиваться, когда пользователь вводит ввод.
Есть ли способ сохранить текущее поведение прокрутки и предотвратить автоматическую прокрутку при использовании ввода? Предпочтительно только с HTML и CSS.

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

html {
scroll-padding-top: 48px;
}

body {
margin: 0;
}

header {
position: sticky;
top: 0;
background: #eeeeee;
padding: 8px 16px;
}

main {
padding: 8px 16px;
}

main article,
main div {
padding: 32px 0;
border-bottom: 1px solid lightgray;
}

main div {
background: #ddddff;
}

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

click me to skip down to the lower section[/url]


some useless text just to fill up vertical space and allow for scrolling


some useless text just to fill up vertical space and allow for scrolling


I also want to link to here. This section should not get cut off by the sticky header. The entire thing should be visible.


some useless text just to fill up vertical space and allow for scrolling


some useless text just to fill up vertical space and allow for scrolling


some useless text just to fill up vertical space and allow for scrolling

Сообщение по теме
Редактирование закрепленного элемента ввода в Chrome приводит к прокрутке страницы вверх — решения используют JS для перехвата ввода. Я бы предпочел не использовать JS в этом случае, если это возможно. Более того, исходная ошибка, описанная в этом сообщении, похоже, исправлена.

Подробнее здесь: https://stackoverflow.com/questions/659 ... s-on-input