JS realizes the index sliding display effect and the sliding display anchor point effect of address book

Only do implementation. . No performance optimization is considered at all. So I realized the special card later.

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

Ideas:Listen to the touchmove event, get clientX and clientY, pass it into elementFromPoint, then get the element and execute click().

There is a problem here, that is, if you have top-level elements like masking layer on your page, please point-events:none. Even if the display:none of this element is useless, it will be useful, and practice will lead to true knowledge. You can try it.

index is the id of the index div

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

The second thing I want to show the flash of this letter when the page slides to a certain letter.

Ideas:Listen to scroll events, use elementFromPoint to get the corresponding element in the position you want, and then execute the display effect.

ps: Weui

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

OK, it's over.

The above article JS implements the index sliding display effect and sliding display anchor point effect of address book are all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.