javascript javascript将事件处理程序绑定到水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11729859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript bind an event handler to horizontal scroll
提问by ihake
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.
javascript 中是否有一种方法可以将事件处理程序绑定到水平滚动，而不是在用户水平和垂直滚动时触发的通用滚动事件？我只想在用户水平滚动时触发事件。
I searched around for an answer to this question, but couldn't seem to find anything.
我四处寻找这个问题的答案，但似乎找不到任何东西。
Thanks!
谢谢！
P.S. My apologies if I'm using some terminology incorrectly. I'm fairly new to javascript.
PS 如果我错误地使用了某些术语，我深表歉意。我对 javascript 还很陌生。
UPDATE
更新
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):
非常感谢您的所有回答！总之，看起来你们都在说 javascript 不支持这，但我可以用这样的东西（使用 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!
这就是我需要知道的全部。再次感谢！
采纳答案by Geuis
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.
您需要做的是订阅滚动事件。垂直/水平没有特定的。
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.clientHeight 和 window.clientWidth。
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.
接下来，获取 window.top 和 window.left。这将告诉您视口的位置，即如果它大于 0，则已使用滚动条。
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.
从这里得到你需要的东西是非常简单的数学。如果在接下来的几个小时内没有其他人提供代码示例，我会尝试这样做。
Edit: A bit further information.
编辑：更多信息。
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.
您必须捕获滚动事件。您还需要在某处存储初始 window.top 和 window.left 属性。每当滚动事件发生时，做一个简单的检查，看看当前的顶部/左侧值是否与商店值不同。
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.
此时，如果两者不同，您可以触发自己的自定义事件以指示垂直或水平滚动。如果您使用 jQuery，这很容易。如果您在没有库帮助的情况下编写 js，这也很容易，但需要更多的参与。
Do some searches for event dispatching in js.
在 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.
然后，您可以编写要订阅自定义事件的任何其他代码，而无需将它们与方法调用联系起来。
回答by ErikE
I wrote a jQuery plugin for you that lets you attach functions to the scrollhevent.
我为您编写了一个 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));
It's this easy to use:
这很容易使用：
$('#container')
.enableHScroll()
.on('scrollh', function(obj, offset) {
$('#info').val(offset);
});
Please note that scroll events come very fast. Even if you click in the scrollbar to jump to a new position, many scroll events are generated. You may want to adjust this code to wait a short time and accumulate all the changes in position during that time before firing the hscroll event.
请注意滚动事件来得非常快。即使点击滚动条跳转到新的位置，也会产生很多滚动事件。在触发 hscroll 事件之前，您可能需要调整此代码以等待一小段时间并累积这段时间内的所有位置变化。
回答by Justin Ethier
You can use the same scrollevent, but within your handler use the scrollLeftfunction to see if the scrollbar moved horizontally from the last time the event was fired. If the scrollbar did not move then just return from your handler. Otherwise update your variable to the new position and take action.
您可以使用相同的scroll事件，但在您的处理程序中使用该scrollLeft函数查看滚动条是否从上次触发事件时开始水平移动。如果滚动条没有移动，那么只需从您的处理程序返回。否则将您的变量更新到新位置并采取行动。
回答by Naftali aka Neal
You can check if the the xvalue of the page changes and ignore your yvalue.
您可以检查x页面的值是否更改并忽略您的y值。
If the xvalue changes: There is your horizontal scroll.
如果x值发生变化：有你的水平滚动。
回答by SexyBeast
With page-load, store the initial scrollbar positions for both in two variables (presumably both will be 0). Next, whenever a scroll event occurs, find the scrollleftand scrolltopproperties. If the scrollleftproperty's value is different and scrolltop's value is same as compared to their earlier values, that's a horizontal scroll. Then set the values of the variables to the new scroll values.
使用页面加载，将两个变量的初始滚动条位置存储在两个变量中（大概都是 0）。接下来，每当发生滚动事件时，查找scrollleft和scrolltop属性。如果该scrollleft属性的值不同并且scrolltop的值与其之前的值相比相同，则为水平滚动。然后将变量的值设置为新的滚动值。
回答by codename-
No, there is no special event for scroll horizontal (it is for global scroll), but you can try to check the position of content by property .scrollLeftand if it's different from the previous value it means that the user scrolled content horizontally.
不，水平滚动没有特殊事件（它用于全局滚动），但是您可以尝试通过属性检查内容的位置，.scrollLeft如果它与之前的值不同，则表示用户水平滚动内容。
