jquery - jQuery平滑div滚动不滚动动态创建的段落标签

我正在建立股票行情自动收录器，并且尝试使用Smooth Div Scroll插件，但无法使其与动态创建的段落标签一起使用。与其创建滚动的水平列表，不如将P标签垂直转储到页面上。如果段落标签是静态添加的，则它们的位置和滚动正确。当我在Firebug中将静态版本与此动态版本进行比较时，html看起来相同，因此我猜测这是CSS问题，但是我没有运气。

编辑：这是一个jsFiddle

有什么建议么？
谢谢

这是代码

$(window).load(function () {
        var $divScrollableArea = $(".scrollableArea");
        var $stocks = new Array("GOLD", "SSRI", "PTM", "PAL", "USD", "SH", "DJI");

        $.each($stocks, function (index, item) {
            var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + item + "%22)%0A%09%09&&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
            $(function () {
                var jqxhr = $.getJSON(url, function (json) {
                    $divScrollableArea.append("<p>" + item + "<br /><span class='left'>" + json.query.results.quote.BidRealtime +
                        "</span><span class='right'>" + json.query.results.quote.Change_PercentChange + "</span></p>");
                })
                .success(function () { BuildScroll(); });
            });
        });
        function BuildScroll() {
            $("div#scrollingText").smoothDivScroll({
                autoScroll: "always",
                autoScrollDirection: "endlessloopright",
                autoScrollStep: 1,
                autoScrollInterval: 15
            });
        }
    });


<style type="text/css">
    .stock
    {
        font: bold .8em Verdana;
        padding: 5px;
        width: 100%;
    }
    .innerStock
    {
        float: left;
        margin-right: 20px;
    }
    .left
    {
        font: normal .7em Verdana;
        text-align: left;
        width: 30%;
        padding-right: 15px;
    }
    .right
    {
        font: normal .7em Verdana;
        text-align: right;
        color: red;
    }
    #scrollingText
    {
        width: 100px;
        height: 35px;
        border: solid 1px #ccc;
        position: relative;
        padding: 2px 0px;
    }

    #scrollingText div.scrollableArea p
    {
        display: block;
        float: left;
        margin: 0;
        padding-right: 7px;
        padding-top: 1px;
        font-family: Courier, Arial, Sans-Serif;
        font-size: 12px;
        line-height: 12px;
        font-weight: normal;
        background-color: #fff;
        color: #000;
        white-space: nowrap;
        width:300px;
    }
</style>

<div id="scrollingText">
    <div class="scrollWrapper">
        <div class="scrollableArea">
        </div>
    </div>
</div>

最佳答案

没错，这是CSS问题。

更具体地说，是#scrollingText的宽度（100px）导致换行。如果删除此属性，您的段落将被浮动（也将减少段落的宽度）。

如果要保持#scrollingText的大小不变，则需要为div.scrollWrapper定义样式，如下所示：

div.scrollWrapper {
    display: block;
    width: 800px;
}

只要确保宽度大于所包含段落的所有宽度之和即可。
我已经更新了您的小提琴（不是我也没有调整段落的宽度）：http://jsfiddle.net/RZBUJ/2/

关于jquery - jQuery平滑div滚动不滚动动态创建的段落标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7719570/