JavaScript 中的鼠标滚轮倾斜与滚动，scrollTop

Posted 2023-03-25

【中文标题】JavaScript 中的鼠标滚轮倾斜与滚动，scrollTop

【英文标题】：Mouse wheel tilt vs. scroll in JavaScript, scrollTop

【发布时间】：2021-09-13 22:04:29

【问题描述】：

有些电脑鼠标有scroll wheel that can be tilted left and right。

这允许在Google's piano roll app 中导航时间维度（代码为here）。

我有以下目标：

使钢琴卷轴垂直而不是水平。以下是在不同应用中滚动竖条的图像，作为示例：

允许通常的垂直鼠标滚轮滚动来导航时间维度（而不是像现在这样的鼠标滚轮左/右倾斜）。

我通过替换实现了第一个目标

this.context.translate(-offset * 2, 0);

hereby

this.context.translate(0, offset * 2);

通过将left 与top 和height 与width 交换并更改一些符号here（代码库here）。

但是，时间维度仍然响应鼠标滚轮左/右倾斜，而不是通常的垂直鼠标滚轮滚动。它可能与the file Scroll.js 有关。我尝试用scrollTop 和类似的东西替换scrollLeft，但这破坏了当前正常的功能。任何提示有关水平滚动的信息如何传递？

（为了让代码运行：npm install，solutions to error C2664。然后从pianoroll 目录调用node_modules/.bin/webpack -p。打开index.html。要获得声音：首先单击钢琴符号，然后单击播放。 )

【参考方案1】：

在roll.scss，替换

    overflow-y: hidden;
    overflow-x: scroll;

通过

    overflow-x: hidden;
    overflow-y: scroll;

没有这个修改，scrollTop 没有改变。