Implémentation JS pour l'effet de défilement de l'index du carnet d'adresses et l'effet d'ancrage de défilement

Je n'ai réalisé que l'implémentation, je n'ai pas du tout considéré l'optimisation des performances. C'est pourquoi, après l'implémentation, il est très lent.

La première est de glisser sur l'index de droite du carnet d'adresses, glisser jusqu'à la lettre correspondante pour sauter à l'ancrage de la lettre correspondante.

Idée :Écoutez l'événement touchmove pour obtenir clientX et clientY, puis les transmettez à elementFromPoint. Ensuite, après avoir obtenu l'élément, exécutez click().

Il y aura un problème ici, c'est que si vous avez une couche de masque ou un élément de premier plan similaire sur votre page, veuillez le pointer-events:none, même si l'élément a display:none; cela ne sert à rien, la pratique est la seule vérité. Vous pouvez essayer.

index est l'id du div d'index

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

Je voudrais également afficher une lettre flashée lorsque la page est défilée à la position d'une lettre spécifique.

Idée :Écoutez l'événement scroll, utilisez également elementFromPoint pour obtenir l'élément correspondant à la position que vous souhaitez, puis exécutez l'effet de visualisation.

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

Très bien, fin.

Voici donc tout le contenu que je vous ai partagé sur la mise en œuvre de l'effet de défilement de l'index de carnet d'adresses et de l'effet d'ancrage de défilement en JavaScript. J'espère que cela vous servira de référence et que vous continuerez à soutenir le tutoriel d'alarme.