Question

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

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

谢谢！

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

更新

非常感谢您的所有答案！总之，看起来你们都说这在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事件。

See it in action at 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检查内容的位置，如果它与之前的值不同，则表示用户水平滚动内容。

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

6 个答案: