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

问题描述

所以，我把一些数据扔到了一个 div 中.它按日期分成块.它使用 jQuery 和鼠标滚轮插件水平滚动.

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 到达终点(最左边，最右边)时，我需要触发一个事件.我认为通过检测在鼠标滚轮插件中获取的数据，可以通过当前实现的方式来计算何时无法进一步滚动.我只需要朝着正确的方向轻推.这是为我执行水平滚动的代码:

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屋！