3

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

情况： 我有一个 div（具有固定的宽度和高度） - 这个 div 的内容超过了其父级的宽度和高度，因此在垂直和水平上都有一个滚动条。

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

问题： 我想做的是直接交换这些行为，所以：

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

和

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

我意识到这是一个坏主意的原因很明显，但我需要能够证明这一点并且似乎无法找到任何示例。当我垂直滚动鼠标或类似的东西似乎经常出现时，我不想让页面水平滚动，我只是想交换垂直和水平滚动条的行为。

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

任何帮助将非常感激

4

1 回答 1

1

这绝对是可能的，起初我认为这要么是不可能的，要么需要大量的工作来解决许多不同的事情，但我在 jsFiidle 中为你做了这个：

jsFiddle 示例

之所以可行，是因为每次滚动事件发生时，我首先使用我的 2 个变量cur_left和cur_top.

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

使用这些信息，我使用一个函数来检查哪个滚动条首先被操作，只需检查 if orig_left != cur_left。

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

我希望这是您想要的并且易于理解，如果不是，我会为您完善我的代码！

笔记

  • 正如 meetamit 所指出的，由于触摸滚动的工作方式，这在很多手持设备中都不起作用——在 iPad 上测试，它会抖动和反弹
  • 这个例子是用 jQuery 编码的，以便于使用


  • 如果内容的高度与宽度不相等，则此示例将不起作用示例：

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

    当垂直滚动时，这只会在水平滚动条上滚动最多 200px

  • 这只在Frontmotion Firefox中测试过

编辑

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

于 2012-10-24T22:51:11.743 回答