0

jticker.js を使用してデータを印刷しています。

大きな画面ではすべて問題ありませんが、小さなモバイル画面では、印刷されたデータでスクロールを続行したいのですが、モバイルデバイスの高さがいっぱいになった後にスクロールしないという問題があります。

データをスクロールすることを認識するコードに自動スクロールを追加するにはどうすればよいですか?

ここに私のコードのデモがあります:

http://jsfiddle.net/e8c8G/

ここに私のコードがあります:

    <title>jticker | Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css" media="screen, projection">

      #ticker
        {height: auto; padding: 0.6em 0; margin: 0 0 1.8em 0; border-top:3px solid #efefef; border-bottom:3px solid #efefef; position: relative;}
      #ticker .cursor
        {display: inline-block; background: #565c61; width: 0.6em; height: 1em; text-align: center;}
      #ticker p
        {margin-bottom: 0.8em;}
      #ticker code
        {margin: 0.4em 0.4em; display: block;}
      #ticker .next 
        {position: absolute; bottom: 1em;}
    </style>
    <script type="text/javascript" src="./jticker3   Demo_files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="./jticker3   Demo_files/jquery.jticker.js"></script>
    <script type="text/javascript">

      jQuery(document).ready(function(){
        // Instantiate jTicker 
        jQuery("#ticker").ticker({
            cursorList:  " ",
            rate:        10,
            delay:       4000
        }).trigger("play").trigger("stop");

        // Trigger events 
        jQuery(".stop").click(function(){
            jQuery("#ticker").trigger("stop");
            return false;
        });

        jQuery(".play").click(function(){
            jQuery("#ticker").trigger("play");
            return false;
        });




        jQuery(".style").click(function(){
            jQuery("#ticker")
            .trigger({
                type: "control",
                cursor: jQuery("#ticker").data("ticker").cursor.css({width: "4em", background: "#efefef", position: "relative", top: "1em", left: "-1em"})
            })
            return false;
        });

      });


    </script>

    </head>

    <body cz-shortcut-listen="true">

    <div id="content">

      <h2 style="text-align:center;">Demo</h2>
      <div id="ticker">
        <div>
            <h3>Cart:</h3>
            <ul style="margin-bottom:40px;">
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>           
            </ul>

                    <a class="next" href="http://www.thepixelart.com/demo/jticker/#" >Total: 109$</a>
        </div>
      </div>



    </div>
4

1 に答える 1