Javascript 在div上拖动手指，如钢琴键，防止移动/平板电脑滚动

我正在尝试为一个功能有点像钢琴的网站创建一个小部件/控件。 想象一下4-5个div，一个在另一个之下，处于绝对位置

<div style="position: relative">
   <div class="quadrant" style="position: absolute; top: 0%; height: 20%></div>
   <div class="quadrant" style="position: absolute; top: 20%; height: 20%></div>
   <div class="quadrant" style="position: absolute; top: 40%; height: 20%></div>
   <div class="quadrant" style="position: absolute; top: 60%; height: 20%></div>
   <div class="quadrant" style="position: absolute; top: 80%; height: 20%></div>
</div>

我希望用户能够在不抬起手指的情况下将手指移动到这些div上！i、 e.我不希望这些按钮充当需要在点击之间抬起手指的“按钮”，但更像是滑块上的点，区别在于，移动滑块时不需要抬起手指。我还想在手指经过一个新div时触发一个事件

我已经让它在桌面上很好地工作，混合了css和鼠标事件，但在移动和平板电脑上玩得很开心。当我尝试按说明移动手指时，浏览器认为用户正在尝试滚动整个页面，即使我将页面缩小到比平板电脑视口小

如何防止这种“滚动能力”

---

我尝试过避免touchstart和touchmove事件的默认设置；这会关闭滚动，但也意味着我无法跟踪/选择所选分区。

是否有帮助：。象限{touch action:none；}？？？似乎没有帮助。谢谢