javascript - X 和 Y 滚动条都可用时的对角线滚动

Question

我使用魔术触控板（触摸板），我注意到的一件事是 Adob​​e Photoshop 等应用程序可以让我沿对角线滚动（同时 X 轴和 Y 轴）。

我从没想过在我的浏览器中使用相同的功能，因为我没有任何用例。到现在。我正在开发一个项目，该项目的“画布”（绘图区域）大于浏览器的可见区域。

overflow: auto;我有滚动条（那是因为我不能同时滚动两个轴。

例如，如果我在画布的左上角并且我想转到右下角，在 Photoshop 中，我只需在触摸板上对角拖动两个手指，但在 Chrome/Safari/Firefox 中，我首先必须向下滚动，然后向右滚动。

视觉示例：https ://codepen.io/alexandernst/pen/XWpPJNj （左侧区域显示整个画布，右侧是用户看到的内容。尝试在右侧区域滚动，直到看到红色方块。）

有什么办法可以实现对角滚动？

标签： javascripthtmlcss