Question

我正在研究一种移动布局，在该布局中，网站标题下方有一个容器，用于显示一张图片。用户可以捏住容器内的图像。我正在使用“ 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>

容器的高度是在页面加载时动态计算的。我面临的问题是，向下滚动到网页的页脚部分时，页面会像橡皮筋效果一样自动滚动回到顶部。

以下是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,
    });

任何帮助将不胜感激

iScroll5问题-滚动时在移动设备上的橡皮筋效果

0 个答案: