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

Question

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

• 有什么方法可以检测水平卷轴上的点击 使用jquery的箭头？

  

注意：

     

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

     

不应在滚动时触发事件。只有在用户明确单击滚动箭头时才会触发它。

     

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

     

宁愿不使用任何插件

感谢。

Answer 1

你可以使用jquery的.scroll函数。

Answer 2

编辑2 ：另一个建议是执行类似的操作，具体取决于您对滚动区域的实现（请参阅working 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来确定水平滚动内容的结果位置。

尝试 working 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;
});

Answer 3

以下是您想要的演示

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

我希望这会对你有帮助吗？