1

phone-gap を使用した iOS アプリの開発。Myindex.html コード (関連) は次のとおりです。

    <script type="application/javascript" src="iscroll.js"></script>
    <script>

        var myScroll;
        function loaded() {
            setTimeout(function () {
                       myScroll = new iScroll('edit');
                       }, 100);
        }
        window.addEventListener('load', loaded, false);
      ..
      ..
      </script>

    <style type="text/css">
    #toolHome,#toolEdit,#toolSetting,#toolMessage{
        position: fixed;
        width: 100%;
        height: 10%;
        display:table;
        z-index:20;
    }
    </style> 


</head>
<body id="bd">
    <div id="toolEdit" class="toolbar">
        <h1 id="pageTitle">Edit</h1>
        <a id="preButton" class="button" onclick="home()">Message List</a>
    </div>
    <div id="edit" title="Edit" ></div>
    <div id="bottomButtons" style="position:fixed;top:90%;width:100%;display:table;height:11%;z-index:20;display:none;"><a class="redButton buttomButton" style="width:22%;position:relative;top:4px" align="left" onclick="deleteList()"><img src="iui/t/default/trash.png" >&nbsp;Delete</a></div>
 </body>

ここでは、div 'toolEdit' にヘッダー セクションが含まれています。div 'edit' には、コンテンツが利用可能なスペースを超えたときに垂直方向にスクロール可能にする必要があるコンテンツ部分が含まれます。div 'bottomButtons' は、削除ボタンを含むフッターです。ヘッダーとフッターの両方に z-index が指定されているため、コンテンツはヘッダーとフッターの両方の下にスライドします。問題は、上にスクロールしようとしたときにコンテンツの下部 (フッターの下にある) がスクロールせず、フッターが一緒に表示されて空白になることです。

iscroll プラグイン (コードに表示) も使用してみましたが、役に立ちません。任意の提案をいただければ幸いです。前もって感謝します。

4

0 に答える 0