只需使用鼠标指针交换水平和垂直滚动

时间:2012-10-08 20:19:49

标签: javascript html css

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

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

要实现的行为: 当我在垂直滚动条上按住鼠标并向上或向下拉动时,内容会垂直滚动。当我在水平滚动上按住鼠标并向左或向右移动时,内容会水平滚动。这是我所知道的默认和预期行为,我是准确的,所以我的问题很明确。

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

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

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

我意识到有很明显的原因,为什么这是一个坏主意,但我需要能够证明这一点,似乎无法找到任何例子。当我垂直滚动鼠标或者看起来经常出现的类似物时,我不打算让页面水平滚动,我只是想交换垂直和水平滚动条的行为。

我可以在必要时发布代码,但我认为情况非常通用,只是一个带有水平和垂直滚动条的div。

非常感谢任何帮助

1 个答案:

答案 0 :(得分:1)

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

jsFiddle example

这样做的原因是因为每次使用我的2个变量cur_leftcur_top发生滚动事件时,我首先保持每个滚动的当前位置。

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

使用此信息,我使用一个函数来检查首先执行哪个滚动条,只需检查是否orig_left != cur_left

然后,我只是将新的滚动位置设置为相对于哪个事件首先出现,我还将确切的位置和事件发生在示例下方。

我希望这是你想要的,易于理解的,如果没有,我会为你优化我的代码!

备注

  • 正如meetamit所指出的,这在许多手持设备中都不起作用 因为触摸滚动的方式工作 - 在iPad和它上测试
  • 喋喋不休地反弹
  • 此示例在jQuery中编码以方便使用
  • 如果内容不具有相同的权限,则此示例将不起作用 高宽比例:

    宽度= 250px;    身高= 200px;

    这只会在水平滚动条上滚动到200px 使用垂直滚动

  • 仅在 Frontmotion Firefox
  • 中进行了测试

修改

我注意到在我的输出框中它始终显示顶部并且从不说左边,这是因为事件发生的速度太快,因为我已将顶部设置为在左边后,它会覆盖目标变量,然后才能看到它更改,调试这个我只需将console.log()放入函数中,你肯定可以看到它出现