有没有一种方法在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();
}
});
这就是我需要知道的全部内容。再次感谢!
从我的手机回答,所以目前无法提供代码。
您需要做的是订阅滚动事件。垂直/水平没有特定的一个。
接下来,您需要获得有关当前显示区域的一些测量值。您需要测量window.clientHeight和window.clientWidth。
接下来,获取window.top和window.left。这将告诉您视口的位置,即如果它大于0则使用滚动条。
从这里获得你需要的东西是非常简单的数学。如果没有其他人在接下来的几个小时内提供了代码示例,我会尝试这样做。
编辑:
更多信息。
您必须捕获滚动事件。您还需要在某处存储初始window.top和window.left属性。每当滚动事件发生时,请进行简单检查以查看当前的顶部/左侧值是否与存储值不同。
此时,如果其中任何一个不同,您可以触发自己的自定义事件以指示垂直或水平滚动。如果您使用的是jQuery,这非常简单。如果你在没有图书馆帮助的情况下编写js,那么它也很容易,但更多一些。
在js中进行一些事件调度搜索。
然后,您可以编写要订阅自定义事件的任何其他代码,而无需将它们与方法调用绑定在一起。
我为你写了一个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事件之前累积该时间段内的所有更改。
你可以使用相同的 scroll
事件,但在你的处理程序中使用 scrollLeft
用于查看滚动条是否从上次触发事件时水平移动的功能。如果滚动条没有移动,那么只需从处理程序返回。否则,将您的变量更新到新位置并采取措施。
你可以检查一下 x
页面的值更改并忽略您的 y
值。
如果 x
值更改:有水平滚动。
使用页面加载,将两个变量的初始滚动条位置存储(可能两者都为0)。接下来,每当发生滚动事件时,找到 scrollleft
和 scrolltop
属性。如果 scrollleft
财产的价值是不同的 scrolltop
与之前的值相比,它的值是相同的,这是一个水平滚动。然后将变量的值设置为新的滚动值。
不,滚动水平没有特殊事件(它用于全局滚动),但您可以尝试按属性检查内容的位置 .scrollLeft
如果它与最后一个值不同,则表示用户水平滚动内容。