Проблема iScroll5 - эффект резиновой ленты на мобильных устройствах при прокрутке - PullRequest
Новая
       37

Проблема iScroll5 - эффект резиновой ленты на мобильных устройствах при прокрутке

1 голос
/ 07 мая 2019

Я работаю над мобильным макетом, в котором под заголовками сайта находится контейнер с полосой изображений.Пользователь может масштабировать изображения в контейнере.Я использую библиотеку «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,
    });

Буду признателен за любую помощь

...