Нажатие на элемент «a» в панели навигации застревает в сенсорном режиме, но работает совершенно иначе - PullRequest
2 голосов
/ 20 апреля 2020

Первое сообщение о 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(); });

РЕДАКТИРОВАТЬ: проблема с "липким" была из-за прикосновения и состояния пылесоса, так что теперь это решено! :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...