javascript - 使用鼠标指针简单地交换水平和垂直滚动

Question

我不确定我在这里寻找什么代码 - 我想可能是 javascript，尽管我想知道它是否可以用 CSS 实现

情况:我有一个 div(具有固定的宽度和高度)- 这个 div 的内容超过了其父元素的宽度和高度，因此在垂直和水平方向上都有一个滚动条。

影响的行为:当我在垂直滚动条上按住鼠标并向上或向下拉时，内容会垂直滚动。当我在水平滚动条上按住鼠标并向左或向右移动时，内容会水平滚动。这是我知道的默认和预期行为，我很精确，所以我的问题很清楚。

问题:我想做的是直接交换这些行为:

当我在垂直滚动条上按住鼠标并向上或向下拉时，内容会水平滚动

和

当我在水平滚动条上按住鼠标并向左或向右移动时

我意识到有很明显的理由说明为什么这是个坏主意，但我需要能够证明这一点，但似乎找不到任何示例。当我垂直滚动鼠标或任何类似的似乎经常出现的事情时，我不想让页面水平滚动，我只是想交换垂直和水平滚动条的行为。

如有必要，我可以发布代码，但我认为情况很一般，只是一个带有水平和垂直滚动条的 div。

任何帮助将不胜感激

Answer 1

这绝对是可能的，起初我认为这要么是不可能的，要么需要围绕许多不同的事情进行大量工作，但我已经在 jsFiidle 中为您做了这个:

jsFiddle example

之所以可行，是因为每次滚动事件发生时，我首先使用我的 2 个变量 cur_left 和 cur_top 保持每个滚动的当前位置。

然后我使用 new_left 和 new_top 设置两个滚动条的新滚动位置。

使用此信息，我使用一个函数来检查首先对哪个滚动条进行操作，只需检查 orig_left != cur_left 即可。

然后我简单地设置新的滚动位置相对于首先发生的事件，我还在示例下方放置了确切的位置和正在发生的事件。

我希望这是你想要的并且易于理解，如果不是，我会为你改进我的代码!

注意事项

• 正如 meetamit 指出的那样，这不适用于很多手持设备由于触摸滚动的工作方式 - 在 iPad 上测试过紧张不安，跳来跳去
• 此示例使用 jQuery 编码以便于使用

• 如果内容不相等，这个例子将不起作用
  高度宽度示例:

  宽度 = 250 像素； 高度 = 200px;

  这只会在水平滚动条上滚动最多 200 像素垂直滚动时

• 这仅在 Frontmotion Firefox 中测试过

编辑

我注意到在我的输出框中它总是说 top 而从不说 left，这是因为事件发生得太快了，因为我已经将 top 设置在 left 之后，它在你甚至可以看到它之前覆盖了目标变量更改，为了调试它，我只是将一个 console.log() 放入函数中，你肯定可以看到它出现了