使用jQuery检测水平滚动div的结尾 [英] Detect end of horizontal scrolling div with jQuery

问题描述

所以，我的div中有一些数据.它按日期分为几大块.它使用jQuery和mousewheel插件进行水平滚动.

So, I've got some data tossed in a div. It's split up into chunks by date. It scrolls horizontally with the use of jQuery and the mousewheel plugin.

我需要在div到达终点(即最左侧，最右侧)时触发一个事件.我认为，通过检测mousewheel插件中提取的数据，当前实现的方式可以计算何时无法进一步滚动.我只需要向正确的方向轻推即可.这是为我做水平滚动的代码:

I need to fire an event when the div has reached it's terminal point (farthest left, farthest right). I think that it is possible with the way it is currently implemented to calculate when you cannot scroll any further by detecting the data fetched in the mousewheel plugin. I just need a nudge in the right direction. Here's the code that does the horizontal scrolling for me:

$(document).ready(function () {        
    $('#timeline').mousedown(function (event) {
        $(this)
            .data('down', true)
            .data('x', event.clientX)
            .data('scrollLeft', this.scrollLeft);
        return false;
    }).mouseup(function (event) {
        $(this).data('down', false);
    }).mousemove(function (event) {
        if ($(this).data('down') == true) {
            this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
        }
    }).mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
    }).css({
        'overflow' : 'hidden',
        'cursor' : '-moz-grab'
    });
});

有人可以给我一些指导吗?谢谢！

Can anybody give me some direction? Thanks!

推荐答案

嘿，我已经为您准备了实现的页面.您可以看到如何使用jQuery检测滚动区域的结尾.

Hey, I've prepared a page for you with the implementation. You can see how to detect the end of scrolling area with jQuery.

对于整个文档，您必须在javascript中检测.scrollTop是否等于.scrollHeight.使用jQuery可以检测:

For the document as a whole you must detect in javascript whether .scrollTop has become equal to .scrollHeight. With jQuery it would be to detect:

if ( $(document).scrollTop() == ( $(document).height() - $(window).height() ) {
  // Do something here ...
}

宽度也一样.在div 此处 中查看示例.

The same is done for width. Have a look on example with div here.

这篇关于使用jQuery检测水平滚动div的结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！