只做實(shí)現(xiàn)。。完全沒考慮性能優(yōu)化。所以我實(shí)現(xiàn)了以后特別卡。

第一個是在通訊錄右邊的索引條上進(jìn)行滑動，滑動到相應(yīng)字母就跳轉(zhuǎn)到相應(yīng)字母的錨點(diǎn)上。

思路：監(jiān)聽touchmove事件，獲取clientX和clientY，傳入到elementFromPoint，然后獲取到元素以后執(zhí)行click()即可。

這里會有個問題，就是如果你的頁面中有遮罩層這一類的頂層元素的話，請將其pointer-events:none，就算這個元素的display:none;也沒用，實(shí)踐出真知。可以去試下。

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

});

第二個我是想在頁面滑動到某個字母的位置時顯示閃一下這個字母。

思路：監(jiān)聽scroll事件，同樣利用elementFromPoint獲取你想要的位置的對應(yīng)元素，然后執(zhí)行顯示效果即可。

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);

}

});

好了，結(jié)束。

以上這篇js實(shí)現(xiàn)做通訊錄的索引滑動顯示效果和滑動顯示錨點(diǎn)效果就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。