11

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

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

谢谢！

PS如果我不正确地使用某些术语，我深表歉意。我对javascript相当陌生。

更新

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

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

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

这就是我需要知道的。再次感谢！

4

6 回答 6

7

用我的电话接听，所以目前无法提供代码。

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

接下来，您需要对当前显示区域进行一些测量。您需要测量 window.clientHeight 和 window.clientWidth。

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

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

编辑：更多信息。

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

此时，如果两者不同，您可以触发自己的自定义事件来指示垂直或水平滚动。如果你使用 jQuery，这很容易。如果您在没有库帮助的情况下编写 js，这也很容易，但需要更多的参与。

在 js 中搜索事件调度。

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

于 2012-07-30T21:33:23.197 回答
4

我为您编写了一个 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 事件之前累积该时间段内的所有位置变化。

于 2012-07-30T22:51:10.540 回答
3

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

于 2012-07-30T21:29:30.167 回答
1

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

如果x值发生变化：有你的水平滚动。

于 2012-07-30T21:29:41.707 回答
1

使用页面加载，将两者的初始滚动条位置存储在两个变量中（大概都是 0）。接下来，每当发生滚动事件时，查找scrollleft和scrolltop属性。如果scrollleft属性的值不同，而scrolltop' 的值与之前的值相同，则为水平滚动。然后将变量的值设置为新的滚动值。

于 2012-07-30T21:31:50.653 回答
0

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

于 2012-07-30T21:30:13.233 回答