jquery - 检测到水平 div 的末尾，并停止

Question

我已经为此奋斗了很多年 - 我相信这会很简单!

我有一个正在开发的系统，人们可以在其中将他们的事件日历嵌入到他们自己的网站中。这通过 jQuery 直接加载到他们的页面中。该页面有一个 div，它使用 margin-left 进行“滚动”。可以在这里看到一个例子:

http://jsfiddle.net/hd1ayrca/4/

计算出你正处于小菜一碟的开始..但我这辈子都无法计算出如何检测它何时结束(并停止滚动)

它需要能够负责任地工作(因为不是每个人都会有一个宽的网页来继续 - 有些人可能只给它几百像素)

谁能帮我摆脱痛苦!谢谢

这是我的代码的简化版本，只是为了更容易看到我的问题

Answer 1

基于 flowstoneknight 的 CSS:

http://jsfiddle.net/hd1ayrca/9/

    $(document).on("click",'#arrow-right', function(ev) {
        ev.preventDefault();

        var documentWidth = $(document).width();
        var totalScroll = -1 * parseInt($('#test').css('marginLeft'));
        var elementWidth = $('#test').width();
        console.log(documentWidth, totalScroll, elementWidth);

        if((totalScroll + documentWidth  - 200) < elementWidth) {
            $('#test').css({
                marginLeft: "-=100px" 
            }, "fast");                
        }


    });

我还添加了 css 过渡而不是动画，这会导致更平滑的过渡，并且更容易检查滚动的当前位置，因为您不需要考虑过渡时间