只做實現。。完全沒考慮性能優化。所以我實現了以后特別卡。

第一個是在通訊錄右邊的索引條上進行滑動，滑動到相應字母就跳轉到相應字母的錨點上。

思路：監聽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實現做通訊錄的索引滑動顯示效果和滑動顯示錨點效果就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html列表滑动字母索引,js实现做通讯录的索引滑动显示效果和滑动显示锚点效果...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。