如何用纯JS和CSS实现安卓平板触屏可滚动点击列表（无滚动条）

一、核心需求实现思路 #

• 隐藏滚动条：保留现有CSS的滚动条隐藏规则，补充触屏滚动兼容性配置
• 触屏拖拽滚动：通过CSS属性启用原生触屏滚动行为，确保流畅体验
• 避免滚动触发点击：通过JavaScript跟踪触摸/鼠标的移动距离，区分点击与滚动操作

二、修改后完整代码 #

HTML 代码 #

<div class="container">
    <div class="half" id="ListaCanzoni">
        <p class="song-name" id="1">Titolo 1</p>
        <p class="song-name" id="2">Titolo 2</p>
        <p class="song-name" id="3">Titolo 3</p>
        <p class="song-name" id="4">Titolo 4</p>
        <p class="song-name" id="5">Titolo 5</p>
        <p class="song-name" id="6">Titolo 6</p>
        <p class="song-name" id="7">Titolo 7</p>
        <p class="song-name" id="8">Titolo 8</p>
        <p class="song-name" id="9">Titolo 9</p>
        <p class="song-name" id="10">Titolo 10</p>
        <p class="song-name" id="11">Titolo 11</p>
        <p class="song-name" id="12">Titolo 12</p>
        <p class="song-name" id="13">Titolo 13</p>
        <p class="song-name" id="14">Titolo 14</p>
        <p class="song-name" id="15">Titolo 15</p>
        <p class="song-name" id="16">Titolo 16</p>
        <p class="song-name" id="17">Titolo 17</p>
        <p class="song-name" id="18">Titolo 18</p>
        <p class="song-name" id="19">Titolo 19</p>
    </div>
    <div class="rendering-target half" id="song"></div>
</div>

CSS 代码 #

body  {
    overflow: hidden;
    background-color: #002;
}

* {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    overflow: hidden;
}

.half {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
}

.song-name {
    font-weight: bold;
    font-size: 2em;
    line-height: 2em;
    letter-spacing: -0.5px;
    padding: 0px 36px 0px 16px;
    border-radius: 6px;
    margin-bottom: 5px;
    background-color: #fff;
    color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(0, 0, 0, 0.2);
    user-select: none;
}

#ListaCanzoni {
    background-color: #024;
    overflow-y: scroll;
    scrollbar-width: none;
    height: 90vh;
    /* 启用垂直触屏滚动，避免浏览器默认行为干扰 */
    touch-action: pan-y;
    /* iOS设备弹性滚动优化 */
    -webkit-overflow-scrolling: touch;
}

#ListaCanzoni::-webkit-scrollbar {
    display: none;
}

.title {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 3em;
    color: #0FF;
    background-color: #042;
}

JavaScript 代码 #

const songDiv = document.getElementById('song');
const items = document.querySelectorAll(".song-name");

items.forEach(el => {
    let startX = 0;
    let startY = 0;
    // 判定滚动的最小移动像素阈值，可根据需求调整
    const scrollThreshold = 10;

    // 记录触摸/鼠标按下的起始位置
    el.addEventListener('touchstart', (e) => {
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
    }, { passive: true });

    el.addEventListener('mousedown', (e) => {
        startX = e.clientX;
        startY = e.clientY;
    });

    // 仅在无明显移动时触发点击逻辑
    el.addEventListener('click', (e) => {
        const endX = e.clientX || (e.touches?.[0]?.clientX || startX);
        const endY = e.clientY || (e.touches?.[0]?.clientY || startY);
        const deltaX = Math.abs(endX - startX);
        const deltaY = Math.abs(endY - startY);

        // 移动距离超过阈值，判定为滚动，阻止点击事件
        if (deltaX > scrollThreshold || deltaY > scrollThreshold) {
            e.preventDefault();
            e.stopPropagation();
            return;
        }

        // 正常点击逻辑
        songDiv.innerHTML = '<div class="title">' + el.id + '</div>';
        console.log(el.id);
        console.log(songDiv.innerHTML);
    });
});

内容的提问来源于stack exchange，提问作者Parduz