javascript - 如果没有剩余内容，请停止滚动

当div中没有​​剩余的内容时，我希望此脚本在单击后停止滚动。

$(document).ready(function () {
    $("#right").click(function () {
        var leftPos = $('.DivDataMain').scrollLeft();
        $(".DivDataMain").animate({scrollLeft: leftPos + 250}, 800);
    });

    $("#left").click(function () {
        var leftPos2 = $('.DivDataMain').scrollLeft();
        $(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 800);
    });
});

这是演示链接：FIDDLE

在演示中，尽管div不再显示任何内容，但它仍继续滚动到右侧。我希望它停止。

提前致谢。

最佳答案

您必须将white-space: nowrap添加到#midleBody元素，然后从其中删除width: 90000px。

发生的事情是您的元素具有固定的宽度，因此您的JavaScript会检测到它并一直持续到最后。您需要根据元素内部的文本动态调整元素，这就是white-space:nowrap的作用。