1

私は、ウェブサイトのヘッダーの下に画像のストリップを表示するコンテナがあるモバイルレイアウトに取り組んでいます。ユーザーは、コンテナー内の画像をピンチズームできます。スクロールとズーム機能を処理するために「iScroll」ライブラリを使用しています。以下は HTML 構造です。

<div id="ui" class="portrait" style="min-height: 247px;">
    <div class="catalogMenu" style="display: none;">
    </div>
    <div class="catalogRoot hideShadow showingPage" tabindex="-1">
        <div class="pageControls" style="display: block; top: 123.5px;">
        </div>
        <div class="iScrollContainer" style="height: 309px;">
            <div class="pageContainer" style="transform-origin: 0px 0px 0px; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 0ms; transform: translate(0px, 0px) scale(1); width: 998px;">
                <catalog-page page="0" style="width: 47px; height: 299px;">
                </catalog-page>
            </div>
        </div>
    </div>
</div>

コンテナーの高さは、ページの読み込み時に動的に計算されます。私が直面している問題は、Web ページのフッター部分に向かって下にスクロールしているときに、ページが輪ゴム効果のように自動的に一番上に戻ることです。

以下はiScroll構成です：

this.pageScroll = new IScroll(this.$.iScrollContainer[0],
    {
        HWCompositing: false,
        tap: !!UI.circularIndex.enableZoomControls,
        click: !UI.circularIndex.enableZoomControls,
        disableMouse: UI.circularIndex.enableZoomControls ? IScroll.utils.hasPointer || IScroll.utils.hasTouch : true,
        disablePointer: Browser.is.mobile ? true : UI.circularIndex.enableZoomControls ? !IScroll.utils.hasPointer : true,
        disableTouch: Browser.is.mobile ? false : UI.circularIndex.enableZoomControls ? IScroll.utils.hasPointer || !IScroll.utils.hasTouch : true,
        scrollX: true,
        scrollY: Browser.is.mobile ? true : false,
        freeScroll: Browser.is.mobile ? true : false,
        zoom: true,
        startZoom: UI.circularIndex.initialZoom,
        zoomMin: Browser.is.desktop ? this.ZOOM_THUMB_SCALE : 1,
        zoomMax: 6,
    });

どんな助けでもいただければ幸いです

4

0 に答える 0