English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Implementação em JS do Efeito de Deslizar do Índice do Catálogo e do Ponto de Ancla de Exibição

Só realizei a implementação... não considerei a otimização de desempenho. Portanto, após a implementação, ficou especialmente lento.

O primeiro é deslizar na barra de índice da agenda à direita, deslizar até a letra correspondente para saltar para o ponto de âncora da letra correspondente.

Pensamento:Escute o evento touchmove, obtenha clientX e clientY, passe para elementFromPoint e, em seguida, execute click() após obter o elemento.

Haverá um problema, que é se seu página tiver uma camada de sobreposição como essa, por favor, remova-o pointer-events:none, mesmo que o elemento display:none; não funciona, prática leva à verdade. Você pode tentar.

index é o id do div de índice

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

O segundo que eu quero é que quando a página deslizar para a posição de uma letra específica, a letra brilhe.

Pensamento:Escutando o evento scroll, utilize elementFromPoint para obter o elemento correspondente ao local desejado e execute o efeito de exibição.

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

Bom, isso é tudo.

Aqui está o conteúdo completo que o editor compartilha com você sobre a implementação de um efeito de deslize de índice de contato e efeito de ancoragem de deslize no JavaScript, espero que isso possa fornecer uma referência para vocês, e espero que vocês apoiem mais o tutorial de gritaria.

Você Também Pode Gostar