Обязательное поле textarea не прокручивается должным образом при использовании фиксированного заголовка. CSS-свойство пр ⇐ CSS

[Anonymous]

У меня на сайте есть фиксированный заголовок и форма. Некоторые поля ввода и некоторые поля textarea являются обязательными. Когда форма отправляется без заполнения этих полей, я бы хотел, чтобы пользователь соответствующим образом прокручивался до самого верхнего обязательного поля, которое не заполнено. Прикрепленная навигационная панель усложняет задачу — я нашел решение для тегов input — используя свойство CSS Scroll-margin-top со значением, равным высоте навигационной панели. К сожалению, это НЕ работает для тегов textarea.

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

header {
position: fixed;
width: 100%;
height: 50px;
background-color: yellow;
top: 0;
}

input { /* WORKS */
scroll-margin-top: 50px;
}

textarea { /* DOES NOT WORK */
scroll-margin-top: 50px;
}

Вот скрипт, отображающий проблему: https://jsfiddle.net/3t42yqgj/ (обязательно откройте его в Chrome или другом браузере на его основе).
Одним из решений является установка свойства CSS Scroll-padding-top (обратите внимание на использование отступов вместо полей) тега html со значением, равным значению высоты панель навигации. Проблема в том, что это создает проблемы с другими частями моего веб-сайта — я бы хотел, чтобы это применялось только к формам нескольких конкретных страниц. К сожалению, это свойство НЕ работает ни с одним другим тегом (например, form или div).

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

html { /* WORKS */
scroll-padding-top: 50px;
}

form { /* DOES NOT WORK */
scroll-padding-top: 50px;
}

div { /* DOES NOT WORK */
scroll-padding-top: 50px;
}

Пожалуйста, помогите мне!


Подробнее здесь: https://stackoverflow.com/questions/786 ... xed-header