Я работаю над приложением, созданным в AngularJS. Одно из требований, которое было передано мне, заключается в том, что когда форма недействительна и пользователь нажимает кнопку отправки, в окне должен прокручиваться первый недопустимый элемент в представлении.
Это довольно легко выполнить с помощью element.scrollIntoView(), но мне нужно установить смещение. Понимаете, в верхней части страницы есть заголовок, который "исчезает" на остальной части страницы. См. Изображение ниже.
Поэтому мне осталось попытаться выяснить какой-то метод компенсации. Я нашел кучу примеров, но я не нашел именно то, что я ищу.
Вот мой текущий код (
var visibleInvalids = angular.element.find('.ng-invalid:visible');
if (angular.isDefined(visibleInvalids)){
// if we find one, set focus and anchor
visibleInvalids[0].scrollIntoView(true);
visibleInvalids[0].focus();
}
Предлагаемый ответ на мой собственный вопрос. Внесите $ anchorScroll и используйте это, но я открыт для идей...
var visibleInvalids = angular.element.find('.ng-invalid:visible');
if (angular.isDefined(visibleInvalids)){
// if we find one, set focus and anchor
// Offset is used to keep items 'below' that fade-in header.
$anchorScroll.yOffset = 200;
if (visibleInvalids[0].id) {
$anchorScroll($location.hash(visibleInvalids[0].id));
}
visibleInvalids[0].focus();
}