Первое сообщение о stackoverflow!
У меня есть проект, где осталась одна проблема, прежде чем он будет завершен. Я кодировал динамически созданную навигационную панель с помощью JS И сделал так, чтобы при нажатии на элемент «а» он плавно переходил к разделу, с которым связан «а». (проверьте функцию scrollTo ()). В дополнение к этому, у меня есть еще одна функция, которая проверяет, находится ли секция в portview, и если это так, то она должна активировать активный класс для этой секции и ТАКЖЕ выделить элемент «a» на панели навигации. Целью этого является улучшение UX.
Код работает отлично, за исключением проблемы one , когда я пробую его на устройствах телефона / ipad в Google Chroe devops. При нажатии на элемент «a» и после его прокрутки до нужной функции выделенный элемент «a» выделяется, как и должно, а при прокрутке вокруг прицела правая часть в области просмотра выделяется в навигационной панели. , как и должно быть, но выделенный элемент «а» все еще подсвечивается. Как будто он липкий.
Я не могу обернуть свой мозг вокруг него, и я думаю, что это может быть из-за того, что он сенсорный, потому что он отлично работает на бесконтактном.
Вот код:
function scrollTo() {
for (let anchor of anchors) {
anchor.addEventListener('click', function(e){
e.preventDefault();
sectionId = anchor.getAttribute('href');
elementToScroll = document.getElementById(sectionId);
elementToScroll.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});
} }
function makeActive() {
for (let section of sections) {
let attr = section.getAttribute('id');
let a = document.querySelector(`[href="${attr}"]`);
let box = section.getBoundingClientRect();
if (box.top <= 150 && box.bottom >= 150) {
section.classList.add('your-active-class');
a.classList.add('menu__link__active');
}
else {
section.classList.remove('your-active-class');
a.classList.remove('menu__link__active');
}
} }
document.addEventListener('scroll', (e) => {
makeActive(); });
РЕДАКТИРОВАТЬ: проблема с "липким" была из-за прикосновения и состояния пылесоса, так что теперь это решено! :)