JS implementation of contact index sliding display effect and sliding display anchor effect

Only to implement...Completely without considering performance optimization. So after I implemented it, it was very slow.

The first one is to slide on the index bar on the right side of the address book, and slide to the corresponding letter to jump to the anchor point of the corresponding letter.

Thinking:Listen to the touchmove event, obtain clientX and clientY, pass them into elementFromPoint, and then execute click() after obtaining the element.

There will be a problem here, that is, if there is a mask layer or such a top-level element in your page, please remove it pointer-events:none, even if this element's display:none; it won't work. Practice makes perfect. You can try it out.

index is the id of the index div

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

The second one is to make the letter flash when the page scrolls to the position of the letter.

Thinking:Listen to the scroll event, and use elementFromPoint to get the corresponding element at the position you want, and then execute the display effect.

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

Alright, that's all.

This js implementation of the index sliding display effect and anchor point display effect for the contact list is all the content that the editor shares with everyone. I hope it can provide a reference for everyone, and I also hope everyone will support the Yelling Tutorial more.