js实现锚点导航,类似手机通讯录,在手指触摸相应字母时,通讯录自动滚动到相应首字母的联系人

mac2025-02-16  6

类似手机通讯录,在手指触摸相应字母时,通讯录自动滚动到相应首字母的联系人。 这边通过需求分析,很容易联想到,使用touchstart和touchmove这两个方法来处理响应操作,touchstart比较简单就不说了,监听touchmove事件时,发现一个问题,当我无论如何在监听元素上移动我的手指,所返回的event.touches[0].target永远指向第一个触摸元素的event对象,而不会指向我当前手指所触摸的元素。 这也就意味着我无法通过回调返回的event来获取当前手指触摸的元素。

我们通过touchmove事件返回的event对象,可以获取当前手指触摸元素的clientX和clientY的值,将值传入document.elementFromPoint就可获取当前触摸的值,这里需要注意的是此方法返回的是最顶层的Dom,所以务必将你需要的Dom的z-index设置为最高。

最新回复(0)