Javascript jQuery:当用户单击divs水平滚动条箭头时触发事件

Javascript jQuery:当用户单击divs水平滚动条箭头时触发事件,javascript,javascript-events,jquery,Javascript,Javascript Events,Jquery,我有一个带水平卷轴的div 有什么方法可以检测到水平卷轴上的点击吗 使用jquery的箭头 注意: 实际上,当用户单击向右滚动箭头时,我希望滚动向右移动固定数量的像素,反之亦然 不应在滚动时触发该事件。仅当用户明确单击滚动箭头时,才应触发该按钮 有多个div具有滚动条,具有相同的类,并且没有id 宁愿不使用任何插件 谢谢 您可以使用jquery的.scroll功能 您可以使用jquery的.scroll功能 编辑2:另一个建议是根据您对滚动区域的实现执行类似操作(请参阅): 编辑2:另一个

我有一个带水平卷轴的div

  • 有什么方法可以检测到水平卷轴上的点击吗 使用jquery的箭头
注意:


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

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

有多个div具有滚动条,具有相同的类,并且没有id

宁愿不使用任何插件


谢谢

您可以使用jquery的.scroll功能

您可以使用jquery的.scroll功能

编辑2:另一个建议是根据您对滚动区域的实现执行类似操作(请参阅):


编辑2:另一个建议是根据滚动区域的实现情况执行类似操作(请参阅):


这是你想要的演示


我希望这会对您有所帮助?

这是您想要的演示


我希望这能对您有所帮助?

实际上,当用户单击右滚动箭头时,我希望滚动向右移动固定数量的像素,反之亦然。当我看到这个示例时,我有了一个想法:您可以检查差异是否正好是40或-40,如果是真的,则执行该事件。它应该是相当安全的,但是我想在不同的系统上是不同的。是的,甚至我也这么认为。。但是,在我的例子中,由于div没有id,我无法获取滚动条的初始值/pos。@ineth因此,我不确定所有浏览器的行为和行为是否都是相同的,始终添加/删除40px。我建议不要这样做。@Oleg是的,那是可以做到的。。但我很想知道一个没有任何解决方案的解决方案;-)实际上,当用户单击右滚动箭头时,我希望滚动向右移动固定数量的像素,反之亦然。当我看到这个示例时,我有了一个想法:您可以检查差异是否正好为40或-40,如果是真的,则执行该事件。它应该是相当安全的,但是我想在不同的系统上是不同的。是的,甚至我也这么认为。。但是,在我的例子中,由于div没有id,我无法获取滚动条的初始值/pos。@ineth因此,我不确定所有浏览器的行为和行为是否都是相同的,始终添加/删除40px。我建议不要这样做。@Oleg是的,那是可以做到的。。但我很想知道一个没有任何解决方案的解决方案;-)
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));
});​
// 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;
});