Прокрутите до класса в angular 5
Очень простой вопрос, как я могу перейти к классу в angular, часами искал, чтобы эта работа заработала, так что расстраивает У меня есть компонент календаря, и когда я выбираю день, события этого дня открываются под ним.
Работает с чистым javascript для идентификатора, но не для класса
const elmnt = document.getElementById('scrollto');
elmnt.scrollIntoView(true);
У меня также есть jQuery, но это вообще не прокрутка
if ($('.call-open').length > 0) {
$('html, body').animate({
scrollTop: $('.call-open').offset().top
}, 2000);
}
этот класс .call-open добавляется после того, как я нажимаю день, может быть, поэтому
Я пробовал плагин это, но он ничего не делает, даже с простой кнопкой примера
Я не могу быть единственным, у кого есть эта проблема, но я не могу найти никакого рабочего решения, sometines angular - заноза в заднице для таких простых вещей, как эта
это может вам помочь stackoverflow.com/a/49875416/4399281
@FatehMohamed это для маршрутизации
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
попробуйте это с таймаутом
scroll(){
setTimeout(() => {
const classElement = document.getElementsByClassName('scrollTo');
if (classElement.length > 0){
classElement[0].scrollIntoView();
}
}
}, 100);
}
это работает, но, черт возьми, это уродливо
window.setTimeout(() => {
if ($('.cal-open').length > 0) {
$('html, body').animate({
scrollTop: $('.cal-open').offset().top - 80
}, 100);
}
}, (250));
и мне нужен jQuery, мне он нужен для чего-то еще на этой странице, но все же решения без jQuery были бы хороши
Я решил эту проблему с помощью следующего кода:
constructor(private el: ElementRef) { }
scrollToFirstInvalidControl() {
const firstInvalidControl: HTMLElement = this.el.nativeElement.querySelector(
"class-name"
);
if (!firstInvalidControl) return false
window.scroll({
top: this.getTopOffset(firstInvalidControl),
left: 0,
behavior: "smooth"
});
}
getTopOffset(controlEl: HTMLElement): number {
const labelOffset = 50;
return controlEl.getBoundingClientRect().top + window.scrollY - labelOffset;
}
Похоже на проблему синхронизации, если элементы добавляются или классы устанавливаются после события щелчка. Введите небольшую задержку с помощью
setTimeout()перед вызовом кода в качестве теста.