Question

我正在构建一个股票代码，我正在尝试使用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>

Answer 1

你是对的，这是一个CSS问题。

更具体地说，#scrollingText（100px）的宽度会导致换行符。如果你删除这个属性，你的段落将被浮动（它也会减少段落的宽度）。

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

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

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

Answer 2

更改你的CSS

<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: 400px;
        height: 80px;
        border: solid 1px #ccc;
        position: relative;
        padding: 2px 0px;
        overflow:auto;
    }

    #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>

jQuery smooth div滚动不滚动动态创建的段落标记

2 个答案: