javascript 将事件处理程序绑定到水平滚动

问题描述

javascript 中是否有一种方法可以将事件处理程序绑定到水平滚动，而不是在用户水平和垂直滚动时触发的通用滚动事件?我只想在用户水平滚动时触发一个事件.

Is there a way in javascript to bind an event handler to a horizontal scroll as opposed to the generic scroll event which is fired when the user scrolls horizontally and vertically? I want to trigger an event only when the user scrolls horizontally.

我四处寻找这个问题的答案，但似乎找不到任何东西.

I searched around for an answer to this question, but couldn't seem to find anything.

谢谢！

附:如果我错误地使用了某些术语，我深表歉意.我对 javascript 还很陌生.

P.S. My apologies if I'm using some terminology incorrectly. I'm fairly new to javascript.

更新

非常感谢您的所有回答！总而言之，看起来你们都在说 javascript 不支持这个，但我认为我可以用这样的东西(使用 jQuery)来完成这个功能 (jsFiddle):

Thanks so much for all your answers! In summary, it looks like you are all saying that this isn't supported in javascript, but I that I can accomplish the functionality with something like this (using jQuery) (jsFiddle):

var oldScrollTop = $(window).scrollTop();

$(window).bind('scroll', function () {
    if (oldScrollTop == $(window).scrollTop())
        //scrolled horizontally
    else {
        //scrolled vertically
        oldScrollTop = $(window).scrollTop();
    }
});​

这就是我需要知道的一切.再次感谢！

That's all I needed to know. Thanks again!

推荐答案

用我的手机回答，所以暂时无法提供代码.

Answering from my phone, so unable to provide code at the moment.

您需要做的是订阅滚动事件.垂直/水平没有特定的.

What you'll need to do is subscribe to the scroll event. There isn't a specific one for vertical/horizontal.

接下来，您需要对当前显示区域进行一些测量.您需要测量 window.clientHeight 和 window.clientWidth.

Next, you'll need to get some measurements about the current display area. You'll need to measure the window.clientHeight and window.clientWidth.

接下来，获取 window.top 和 window.left.这将告诉您视口的位置在哪里，即如果它大于 0，则使用了滚动条.

Next, get window.top and window.left. This will tell you where position of the viewport is, ie if it's greater than 0 then scroll bars have been used.

从这里得到你需要的东西是非常简单的数学运算.如果在接下来的几个小时内没有其他人提供代码示例，我会尝试这样做.

It's pretty simple math from here to get what you need. If no one else has provided a code example in the next few hours I'll try to do so.

更多信息.

您必须捕获滚动事件.您还需要将初始 window.top 和 window.left 属性存储在某处.每当滚动事件发生时，进行简单检查以查看当前顶部/左侧值是否与存储值不同.

You must capture the scroll event. You also need to store the initial window.top and window.left properties somewhere. Whenever the scroll event happens, do a simple check to see if the current top/left values differ from the stores value.

此时，如果两者不同，您可以触发自己的自定义事件来指示垂直或水平滚动.如果你使用 jQuery，这很容易.如果您在没有库帮助的情况下编写 js，这也很容易，但需要更多的参与.

At this point, if either are different you can trigger your own custom events to indicate vertical or horizontal scrolling. If you are using jQuery, this is very easy. If you are writing js without library assistance, it's easy too but a little more involved.

在 js 中搜索事件调度.

Do some searches for event dispatching in js.

然后，您可以编写任何其他想要订阅自定义事件的代码，而无需将它们与方法调用绑定在一起.

You can then write any other code you want to subscribe to your custom events without needing to tie them together with method calls.

这篇关于javascript 将事件处理程序绑定到水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！