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

Question

有没有一种方法在javascript中将事件处理程序绑定到水平滚动，而不是在用户水平和垂直滚动时触发的通用滚动事件？ 我想只在用户水平滚动时才触发事件。

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

谢谢！

PS如果我错误地使用了某些术语，我很抱歉。 我对javascript很新。

UPDATE

非常感谢您的所有答案！ 总之，看起来你们都说javascript中不支持这个，但是我可以用这样的东西来完成这个功能（使用jQuery） （jsFiddle） ：

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

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

这就是我需要知道的全部内容。 再次感谢！

Answer 1

从我的手机回答，所以目前无法提供代码。

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

接下来，您需要获得有关当前显示区域的一些测量值。 您需要测量window.clientHeight和window.clientWidth。

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

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

编辑：更多信息。

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

此时，如果其中任何一个不同，您可以触发自己的自定义事件以指示垂直或水平滚动。 如果您使用的是jQuery，这非常简单。 如果你在没有图书馆帮助的情况下编写js，那么它也很容易，但更多一些。

在js中进行一些事件调度搜索。

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

Answer 2

我为你写了一个jQuery插件，它允许你将函数附加到scrollh事件。

在jsfiddle.net上查看它的实际操作 。

/* Enable "scrollh" event jQuery plugin */
(function ($) {
    $.fn.enableHScroll = function() {
        function handler(el) {
           var lastPos = el
              .on('scroll', function() {
                 var newPos = $(this).scrollLeft();
                 if (newPos !== lastPos) {
                     $(this).trigger('scrollh', newPos - lastPos);
                     lastPos = newPos;
                 }
              })
              .scrollLeft();
        }
        return this.each(function() {
            var el = $(this);
            if (!el.data('hScrollEnabled')) {
                el.data('hScrollEnabled', true);                 
                handler(el);
            }
        });
    }
}(jQuery));

这很容易使用：

$('#container')
    .enableHScroll()
    .on('scrollh', function(obj, offset) {
        $('#info').val(offset);
    });

请注意滚动事件非常快。 即使您单击滚动条以跳转到新位置，也会生成许多滚动事件。 您可能希望调整此代码以等待一小段时间，并在触发hscroll事件之前累积该时间段内的所有更改。

Answer 3

您可以使用相同的scroll事件，但在处理程序中使用scrollLeft函数来查看滚动条是否从上次触发事件时水平移动。 如果滚动条没有移动，那么只需从处理程序返回。 否则，将变量更新为新位置并采取措施。

Answer 4

您可以检查页面的x值是否更改并忽略y值。

如果x值改变：有水平滚动。

Answer 5

使用页面加载，将两个变量中的初始滚动条位置存储（可能两者都为0）。 接下来，每当发生滚动事件时，找到scrollleft和scrolltop属性。 如果scrollleft属性的值不同，并且scrolltop的值与它们之前的值相比是相同的，那么这是一个水平滚动。 然后将变量的值设置为新的滚动值。

Answer 6

不，滚动水平没有特殊事件（它用于全局滚动），但您可以尝试按属性.scrollLeft检查内容的位置，如果它与前一个值不同，则表示用户水平滚动内容。