我不确定我在这里寻找什么代码 - 我想可能是javascript,虽然我想知道它是否可以通过CSS实现
情况: 我有一个div(具有固定的宽度和高度) - 这个div的内容超过其父级的宽度和高度,因此在垂直和水平上有一个滚动条。
要实现的行为: 当我在垂直滚动条上按住鼠标并向上或向下拉动时,内容会垂直滚动。当我在水平滚动上按住鼠标并向左或向右移动时,内容会水平滚动。这是我所知道的默认和预期行为,我是准确的,所以我的问题很明确。
问题: 我想做的是直接交换这些行为:
当我在垂直滚动条上按住鼠标并向上或向下拉动时,内容会水平滚动
和
当我在水平滚动条上按住鼠标并向左或向右移动时
我意识到有很明显的原因,为什么这是一个坏主意,但我需要能够证明这一点,似乎无法找到任何例子。当我垂直滚动鼠标或者看起来经常出现的类似物时,我不打算让页面水平滚动,我只是想交换垂直和水平滚动条的行为。
我可以在必要时发布代码,但我认为情况非常通用,只是一个带有水平和垂直滚动条的div。
非常感谢任何帮助
答案 0 :(得分:1)
这绝对是可能的,起初我认为要么是不可能的,要么需要大量的工作来解决许多不同的事情,但我已经在jsFiidle为你做了这个:
这样做的原因是因为每次使用我的2个变量cur_left
和cur_top
发生滚动事件时,我首先保持每个滚动的当前位置。
然后我使用new_left
和new_top
设置两个滚动条的新滚动位置。
使用此信息,我使用一个函数来检查首先执行哪个滚动条,只需检查是否orig_left != cur_left
。
然后,我只是将新的滚动位置设置为相对于哪个事件首先出现,我还将确切的位置和事件发生在示例下方。
我希望这是你想要的,易于理解的,如果没有,我会为你优化我的代码!
备注强>
如果内容不具有相同的权限,则此示例将不起作用 高宽比例:
宽度= 250px; 身高= 200px;
这只会在水平滚动条上滚动到200px 使用垂直滚动
修改强>
我注意到在我的输出框中它始终显示顶部并且从不说左边,这是因为事件发生的速度太快,因为我已将顶部设置为在左边后,它会覆盖目标变量,然后才能看到它更改,调试这个我只需将console.log()
放入函数中,你肯定可以看到它出现