js城市首字母拖动检索

比较常用的功能，原生js，不依赖任何库，兼容性待验证。demo请用手机预览，或f12在移动端模式下观看。

演示地址：[demo]

html：

<div class="wrap">
    <ul id="list">
        <li class="title" id="A">A</li>
        <li>安顺</li>
        <li class="title" id="B">B</li>
        <li>北京</li>
        <li>白银</li>
        <li class="title" id="C">C</li>
        <li>重庆</li>
        <li>成都</li>
        <li>赤峰</li>
        <li class="title" id="D">D</li>
        <li>大连</li>
        <li>东莞</li>
    </ul>

    <div id="slide">
        <i>A</i>
        <i>B</i>
        <i>C</i>
        <i>D</i>
    </div>
</div>

javascript：

var slide=document.querySelector("#slide");
var list=document.querySelector("#list");

slide.addEventListener('touchstart', goto);
slide.addEventListener('touchmove', goto);

function goto(e) {
    e.preventDefault();
    e.stopPropagation();
    try {
        var touch = e.touches[0];
        var ele = document.elementFromPoint(touch.pageX, touch.pageY);
        var anchor = document.querySelector("#"+ele.innerHTML);
        if (anchor) {
            list.scrollTop = anchor.offsetTop;
            console.log(ele.innerHTML)
        }
        
    } catch (e) {}
}

笔记：

1.touchmove结束时，e.target并非当前元素，而是touchstart时的那个元素，改用document.elementFromPoint；
2.当元素不存在时，document.getElementById返回null,而document.querySelector直接报错，需处理。