Implementación de efectos de deslizamiento de índice y ancla de visualización en el directorio de contactos usando js

Sólo hice la implementación... No consideré la optimización de rendimiento. Por lo tanto, después de implementarlo, resultó muy lento.

El primero es deslizar en la barra de índice a la derecha del libro de direcciones, deslizar hasta la letra correspondiente para saltar al punto de anclaje de la letra correspondiente.

Enfoque:Escucha el evento touchmove, obtén clientX y clientY, introdúcelos en elementFromPoint y luego, después de obtener el elemento, ejecuta click().

Aquí hay un problema, es que si hay una capa de superposición como este tipo de elementos superiores en su página, por favor, márquelo como pointer-events:none, ni siquiera es útil si este elemento tiene display:none; la práctica es la única verdad. Pueden probarlo.

index es el id del div de índice

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

El segundo es para que cuando se deslice la página hasta una posición de letra determinada, se muestre una luz intermitente en esa letra.

Enfoque:Escuchar el evento scroll, utilizar elementFromPoint para obtener el elemento correspondiente a la posición deseada y luego ejecutar el efecto de visualización.

ps: Se utiliza 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);
  }
 });

Bueno, esto es todo.

Aquí termina todo el contenido que el editor comparte con ustedes sobre la implementación de efectos de deslizamiento de índice de contacto y efecto de ancla de deslizamiento en js, espero que les sea útil como referencia y que apoyen más al tutorial de alarido.