Реализация эффекта скольжения индекса и锚а в адресной книге с помощью JavaScript

Я только реализовал это, совершенно не думая о оптимизации производительности. Поэтому после реализации это особенно медленно.

Первое - это скольжение по индексной строке справа от книги контактов, скольжение до соответствующей буквы, чтобы перейти к锚у соответствующей буквы.

Мысль:Слушайте событие touchmove, чтобы получить clientX и clientY, передайте их в elementFromPoint, а затем, после получения элемента, выполните click().

Здесь есть проблема, если на вашей странице есть такие верхние элементы, как фильтр, установите для них pointer-events:none, даже если display:none; не работает, практика является истинным знанием. Попробуйте это.

index - это id div индекса

$("#index").get(0).addEventListener('touchmove',function(event){
   var a = document.elementFromPoint(event.touches[0].clientX,event.touches[0].clientY).parentNode;
   a.click();
  });

Второй момент - я хочу, чтобы при скольжении страницы до позиции определенного символа, этот символ загорелся.

Мысль:Слушать событие scroll, аналогично использовать elementFromPoint для получения соответствующего элемента в положении, которое вы хотите, и затем выполнить эффект отображения.

ps: Используется weui

$("window").scroll(function(){
  var a = document.elementFromPoint(0,0);
  if($(a).hasClass("weui_cells_title"))
  {
   $(".weui_toast_content_my").html($(a).attr("name"));
   $("#toast").show(0);
   $("#toast").slideUp(300);
  }
 });

Конец.

Вот и все, что я хочу поделиться с вами о реализации эффекта скольжения для адресной книги с помощью JavaScript. Надеюсь, это будет полезно для вас, и希望大家多多 поддерживать呐喊 руководства.