2

iPhone アプリの Web コンテンツで UIScrollView の動作を再現しようとしています。画面全体とほぼ同じ幅の同じ高さのアイテムが多数あり、ユーザーがそれらを水平にスクロールできるようにしたいと考えています。Photos アプリのようなもの、または Coverflow のようなものを考えてみてください。内容は今日のニュース、明日のニュース、そして昨日のニュース。

HTML と CSS のコードがたくさん書かれています。各「日」がアイテムに対応します。コードは次のとおりです（説明のために境界線を追加しました）

<html>
<style type="text/css">
    body {
        margin-left:0px;
        margin-right:0px;
    }

    div#todayContainer {
        position:relative;
        height:250px;
        overflow-x:auto;
        -webkit-overflow-scrolling: touch;
        border:solid 1px yellow;
    }

    div#todayContent {
        position:absolute;
        left:-320px;
        width:960px;
        height:100%;
        overflow-x:auto;
        border:solid 1px blue;
    }

    .day {
        position:absolute;
        left:330px;
        width:300px;
        height:100%;
        background-color:red;
    }

    .nextDay {
        position:absolute;
        left:650px;
        width:300px;
        height:100%;
        background-color:green;
    }

    .previousDay {
        position:absolute;
        left:10px;
        width:300px;
        height:100%;
        background-color:orange;
    }
    </style>
<body>
    <div id="todayContainer">
        <div id="todayContent">
            <div class="previousDay">
                Test previousDay
            </div>
            <div class="day">
                Test
            </div>
            <div class="nextDay">
                Test nextDay
            </div>
        </div>
    </div>
</body>

実行中はすべて問題ないように見えます...

ここに画像の説明を入力

...そして、少し右にスクロールすると、すべてうまくいくように見えます!

ここに画像の説明を入力

しかし、左にスクロールしようとすると、うまくいきません。しかし、タッチ オーバーフロー スクロールがオンになっているので、左に少し「バウンス」して、目的のコンテンツを表示できます...

ここに画像の説明を入力

スクロールして完全に表示することはできません。また、下部のスクロール インジケーターが、コンテンツの最左端に既にあると認識しているように見えることに注意してください。でも、やっぱりスルーの1/3程度だと思ってほしいです。

何か助けはありますか？

4

0 に答える 0