JScrollPane水平滚动条鼠标滚轮

Question

我一直未能成功地让鼠标滚轮滚动一个水平的jscrollpane。有没有人有这方面的经验并可以提供一些指导。

在js文件的注释中，我看到了几个月前的以下更新： // 2.0.0beta3 - (2010-08-27) 水平鼠标滚轮、mwheelIntent、键盘支持、错误修复 我查看了github的问题页面、Kelvin的FAQ和已知问题页面以及google组，但没有发现任何使我认为这不可能的东西。

感谢任何帮助。

- Rob Allen

Answer 1

你可以使用类似这样的方法：

$('.scroller').each(function(){
    var scrollPane = $(this).jScrollPane();
    var api = scrollPane.data('jsp'); 
    scrollPane.bind( 
        'mousewheel',
        function (event, delta, deltaX, deltaY) 
        { 
            api.scrollByX(delta*-50);
            return false;
        } 
    ); 
});

将-50更改为其他值以更改滚动的速度和方向。

- Philip Seyfi

Answer 2

你需要确保使用的mousewheel插件版本在2010-08-27之后发布 - mousewheel插件和jScrollPane都有所改变以使其正常运作。在我的演示页面中，我正在使用3.0.4版本：

http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js

如果这不起作用，您可以确认一下在我的演示页面上水平滚动是否对您有用。在所有我尝试过的浏览器中，只要鼠标支持水平滚轮操作（或在Macbook触摸板上），都可以使用水平滚动。

- vitch

---

我已经拉取了最新的鼠标滚轮。在您的演示页面上，水平滚动对我无效。我尝试使用IE、Chrome和Safari，但结果都一样。只有垂直滚动似乎有效，别的都不行。 - Rob Allen

另外，我刚意识到也许我误解了这个应该如何工作。在仅水平模式下，我期望移动垂直滚动条的同一个滚轮也会移动水平滚动条，这是正确的吗？ - Rob Allen

已确认移位滚动实际上可以工作，因此水平滚动不是我预期的，但可能正好按照实现的方式工作。 - Rob Allen

这个想法是让水平滚动响应鼠标滚轮，从而能够水平滚动。我的微软滚轮鼠标在你将滚轮向侧面推时可以实现这一点。我的MacBook上的触摸板也可以做到这一点。 就我个人而言，我认为“垂直鼠标滚轮使水平滚动发生”（就像在苹果应用商店中）真的很不直观，从可用性的角度来看也很糟糕，所以我不太可能在jScrollPane中实现它。 - vitch

听起来不错，我无法对直觉部分发表评论，因为我已经使用JScrollHorizontalPane（基于您的旧东西）这么长时间了，它已经成为我的第二天性。感谢您的及时反馈和出色的库。 - Rob Allen

Answer 3

我在1.5年前使用过下面的链接，它肯定有效，请让我知道如果你有任何疑问。

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

- kobe

---

请查看此链接，它具有水平滚动条：http://jscrollpane.kelvinluck.com/arrow_positions.html - kobe

Answer 4

我使用了Brandon Aaron的鼠标滚轮检测插件：
http://brandonaaron.net/code/mousewheel/demos

它在FF、Opera、Safari、Chrome和IE8+中都能很好地工作。

- zzzzBov

---

我已经引用了这个插件，如果我理解正确的话，Kelvin 实际上是在他的代码中进行绑定。因此，除非我漏掉了什么，我只需要引用它就可以了，一切都会被处理好的？ - Rob Allen

Answer 5

这在我的网站上完美运行。

试试看。

jQuery(function($) {
    $('div.scroll-pane')
        .bind('mousewheel', function(event) {
           var scrollPane = $(this).jScrollPane();
           var api = scrollPane.data('jsp'); 
           scrollPane.bind( 'mousewheel',function (event, delta, deltaX, deltaY) 
        { 
            api.scrollByX(delta*-50);
            return false;
        } 
         ); 
        });
});

- STEEL

---

你正在绑定两次鼠标滚轮事件 - 因此，每次鼠标滚轮事件都会将另一个事件绑定到scrollPane元素上。通过这段代码，我已经体验到了滚动加速的行为。 - chodorowicz