当用户点击 div 水平滚动条箭头时触发事件

Question

我有一个带有水平滚动条的 div。

• 有什么方法可以使用 jQuery 检测水平滚动箭头上的点击吗？

笔记：

实际上，当用户单击向右滚动箭头时，我希望滚动向右移动固定数量的像素，反之亦然。

该事件不应在滚动时触发。 仅当用户明确单击滚动箭头时才应触发它。

有多个具有滚动条的 div，具有相同的 class 并且没有 ID。

宁愿不使用任何插件

Answer 1

这是您想要的演示

http://jsbin.com/opufow/4/edit

我希望这能帮到您？

Answer 2

你可以使用。滚动jquery的function。

Answer 3

编辑 2 ：另一个建议是根据滚动区域的实现执行类似的操作（请参阅工作 jsfiddle ）：

function CustomScrollArrow(elementToScroll) {
    var $el = $(elementToScroll);
    return $('<a>Click me to scroll</a>').css(/*...*/).click(function(){
        $el.scrollLeft($el.scrollLeft()+10);
    });
}

$('.ScrollAreaClass').each(function(){
    // You could choose to append to your scrolling
    // areas or their wrapper classes or whatever...
    $('body').append(new CustomScrollArrow(this));
});​

之后，只需为您的手工箭头设计样式即可。

编辑 1 ：我看到你更新了你的问题，所以这里有一个更新的答案和一个替代解决方案。

您可以尝试通过使用自定义滚动条实现来规避该问题，例如 Kelvin Luck 或其他任何人的jScrollPane 。 如果解决方案在箭头上提供点击事件 - 那么您就设置好了。 否则只是做一些修补......

但是，我坚持我的观点，除非您希望在浏览器执行箭头单击之前执行某个操作，否则我建议向该单击的实际结果（即滚动）添加一个事件处理程序。

这样做将有助于避免浏览器中滚动的各种实现之间的不一致； 如果以另一种方式执行滚动（即滑动手势），将继续工作； 如果有一些 javascript 代码替换了滚动条的默认浏览器实现，它仍然可以工作。

jQuery 提供.scroll处理程序来捕获滚动，并提供.scrollLeft来确定水平滚动内容的结果 position。

尝试一个有效的 jsfiddle或查看下面的代码：

// Cache the initial scroll position:
var initialLeftScroll = $('#wrapper').scrollLeft();
// Bind event:
$('#wrapper').scroll(function (ev) { 
    // Get new horizontal scroll offset:
    var currentLeftScroll = $('#wrapper').scrollLeft();
    // Determine the difference
    // (did the user scroll horizontally or just vertically?):
    var leftScrollDifference = currentLeftScroll - initialLeftScroll;
    // Now we can check 
    if (leftScrollDifference) {
        /* Do something here */
    }
    // Reset the cache:
    initialLeftScroll = currentLeftScroll;
});