This is a local page that runs on an Android tablet.
That tablet will be not connected to any network, so everything needs to stay in the device storage.

HTML code:

    <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 code:

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;
    padding-top: 5px;
    padding-bottom: 5px;

    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;
}
#ListaCanzoni::-webkit-scrollbar {
  display: none;
}


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

javascript code:

const songDiv = document.getElementById('song');
const item = document.querySelectorAll(".song-name");
item.forEach(function (el) {
  el.onclick = function () {
    songDiv.innerHTML = '<div class="title">' + this.id + '</div>';
    console.log (this.id);
    console.log (songDiv.innerHTML);
  }
});

The page is also in this JSFiddle .

The left half contains a list of clickable buttons (divs) and i’d like to hide any scrollbar but let the user be able to scroll it with the usual “drag” action on the touch screen.

How could i allow this action without generating clicks?

I’d like a solution which does not requires any additional js libraries/plugins, but if not possible at least one which requires the minimum possible.