Прокрутка меню на iphone

Question

Привет, у меня проблема с выпадающим меню на iphone.всякий раз, когда в моем меню более 6 ссылок, список слишком длинный и всякий раз, когда я хочу прокрутить его пальцем вниз, я не могу, потому что я нажимаю на ссылку, и она мгновенно переходит на другой URL, как я могу избежать этого и распознать, чтоЯ хочу прокрутить меню немного вниз, и как распознать, если я коснулся меню li, чтобы перейти к другому URL?

$(".content-bar--content").on("click", function() {
           window.location.href = link;
       });

так выглядит мой код

Answer 1

На основе https://www.falise.com/blog/prevent-click-event-scrolling-ipad/ без jquery

Сначала мы проверяем, является ли устройство iOS или нет

var iOS = agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0;

Нам также нужна переменная, которая сообщит нам, если экранпроисходит касание и перемещение.

var touchMoving = false;

Тогда для iOS добавьте только прослушиватели событий, которые прослушивают touchmove и touchend, которые установят touchMoving в соответствующее значение.

if (iOS)
{  
  document.addEventListener("touchmove", function(e)
  {
     touchMoving = true;
  });

  document.addEventListener("touchend", function(e)
  {
    touchMoving = false;
  });
} 

Теперь, когда во время прокрутки нажимается ссылка с классом content-bar--content, это предотвратит событие click, поскольку touchMoving имеет значение true.

document.querySelectorAll('.content-bar--content').forEach(elem => {
    elem.addEventListener('click', function(e) {
        if (touchMoving) {
            e.preventDefault();
        }
    }
});