Question

我多年来一直在与这个斗争 - 我相信它会变得简单！

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

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

确定你是一块蛋糕的开头......但我不能为我的生活找出如何检测它何时结束（并阻止它们滚动）

它需要能够负责任地工作（因为不是每个人都有一个宽大的网页可以继续 - 有些可能只给它几百px）

任何人都可以帮助我摆脱痛苦！感谢

这是我的代码的简化版本，只是为了更容易查看我的问题＆lt; G＆gt;

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过渡而不是动画，这样可以实现更平滑的过渡，并且更容易检查滚动的当前位置，因为您不需要考虑过渡时间

Answer 2

将margin-left值与#('#test_wrapper').width()-$('#test').width()。

之类的值进行比较

您还需要为#test更改一些CSS。不要设置其宽度，因此它可以与文本内部一样宽或窄。您需要将其设为display: inline-block和white-space: nowrap，以便文字保留在一条长行上。

以下是基于您的修改后的fiddle。

滚动到结尾时的轻微跳跃是因为#test的宽度不是100的倍数。

检测水平div结束时的时间，然后停止

2 个答案: