js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

Ho fatto solo l'implementazione... Non ho considerato l'ottimizzazione delle prestazioni. Quindi, dopo averlo implementato, è particolarmente lento.

Il primo è lo scorrimento dell'indice di contatto sulla parte destra, lo scorrimento fino alla lettera desiderata per saltare all'ancora della lettera corrispondente.

Pensiero:Ascoltare l'evento touchmove per ottenere clientX e clientY, poi passarli a elementFromPoint e infine eseguire click() dopo aver ottenuto l'elemento.

C'è un problema qui, ovvero se ci sono elementi di livello superiore come sovrapposizioni nella tua pagina, dovresti impostare pointer-events:none, anche se l'elemento ha display:none; non serve a nulla, la pratica è la verità. Puoi provarlo.

index è l'id del div di indice

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

Il secondo che voglio è mostrare un flash di questa lettera quando la pagina scorre alla posizione di una lettera specifica.

Pensiero:Ascoltare l'evento scroll, utilizzare elementFromPoint per ottenere l'elemento corrispondente alla posizione desiderata e quindi eseguire l'effetto di visualizzazione.

ps: viene utilizzato 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);
  };
 });

Bene, finito.

Questa guida JavaScript per implementare l'effetto di scorrimento dell'indice dei contatti e l'effetto di ancoraggio dello scorrimento è tutto ciò che ho condiviso con voi. Spero che possa essere un riferimento per voi e che possiate sostenere il tutorial urlaio con più entusiasmo.