jsで連絡先リストのインデックススライド表示効果とスライド表示アンカー効果を実現する

実装のみを行い、性能最適化は全く考えませんでした。そのため、実装した後、非常に重くなりました。

一つ目は、連絡先の右側の索引バーでスライドし、特定のアルファベットにスライドすると、そのアルファベットのアンカーにジャンプします。

考え方：touchmoveイベントをリスンし、clientXとclientYを取得し、elementFromPointに渡し、要素を取得した後にclick()を実行します。

ここに問題があります。ページにマスクレイヤーなどのトップレベルの要素がある場合、pointer-events:none、その要素のdisplay:none;も無効です。実践で真実を知ります。試してみてください。

indexはインデックスdivのid

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

次に、ページをスクロールして特定の文字の位置に到達したときにその文字を一瞬光らせることを考えています。

考え方：scrollイベントを監視し、elementFromPointを使用して必要な位置の対応する要素を取得し、表示効果を実行します。

ps: 使用しているのは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);
  }
 });

それでは、終わり。

以上のこのjs実装がコミュニケーションリストのインデックススライド表示効果とスライド表示アンカー効果です。皆様に参考になれば幸いです。また、呐喊タイプのサポートを多くお願いします。