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


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

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

谢谢!

附:如果我错误地使用了一些术语,我很抱歉。我对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();
    }
});​

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


11294
2017-07-30 21:24


起源

请参阅我可能对您有用的新答案。 - ErikE


答案:


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

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

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

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

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

编辑: 更多信息。

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

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

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

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


6
2017-07-30 21:33



现在,这是奉献精神。 - Danny Bullis


我为你写了一个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事件之前累积该时间段内的所有更改。


4
2017-07-30 22:51



感谢您发布此内容,ErikE。 - ihake


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


3
2017-07-30 21:29





你可以检查一下 x 页面的值更改并忽略您的 y 值。

如果 x 值更改:有水平滚动。


1
2017-07-30 21:29





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


1
2017-07-30 21:31





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


0
2017-07-30 21:30



你的答案是不正确的。当用户第一次向右滚动时,它将检测水平滚动。在那之后,即使他向上或向下滚动, scrollleft 仍然会显示大于0,因为他没有向左滚动,因此它将错误地注册为水平滚动。 - SexyBeast
现在我读它,你说得对。也许我的回答有点凌乱......他应该记住最后的价值 scrollLeft 财产和比较新旧。 - codename-
是的,确切地说。没问题。 - SexyBeast
我纠正了我的答案:) - codename-
scrollLeft是jQuery中的函数:)在vanilla中,js是一个属性: developer.mozilla.org/pl/DOM/element.scrollLeft - codename-