js Realizes Sliding Display Effect and Sliding Display Anchor Point Effect of Address Book Index

Just do realization. . Performance optimization is not considered at all. So I realized the special card in the future.

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

Thoughts: Listen to touchmove events, get clientX and clientY, pass in to elementFromPoint, and then get the elements and then execute click ().

There is a problem here, that is, if you have a top-level element of Category 1 in your page, please put it pointer-events: none, even if it is display: none; It's no use, practice brings true knowledge. You can try it.

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 that I want to flash 1 when the page slides to the position of a letter.

Thoughts: Monitor scroll events, also use elementFromPoint to get the corresponding elements of the location you want, and then execute the display effect.

ps: weui is used

$(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);
  }
 });

All right, over.