Question

我正在使用iscroll 5作为我的ios phonegap应用程序，以解决我的固定标题闪烁的问题。我正在使用单页面布局，每次视图更改时我都会初始化一个新的myScroll变量。我已经在我的布局中测试了结果，并且在视图之间来回导航时注意到以下行为： - 在动画之后，页面显示在其先前的滚动位置，然后跳回到顶部。

我尝试使用不同的超时组合来创建新的myScoll变量，但没有运气。

更新：这是代码

HTML

<body class="ios7" onload="onBodyLoad()"> <!-- native | ios7 -->
    <section id="view-home" class="active">
        <header>            
            <button class="left info" data-vin="view-about" data-sd="popin">                   </button>
            <h1>My app</h1>
            <button class="right map" data-vin="view-walks-map" data-sd="popin" onclick="onMapLoad('map_canvas')">
            </button>

        </header>
        <div class="scrollMask"></div>
        <div class="scrollWrap">
            <div class="scroll">
                <ul class="content">
                    <div class="homeTile">
                        <div class="tile" data-vin="view-walk1" data-sd="sl" onclick="galleryWalk1()">
                            <img src="images/walk-cover.png">
                            <div class="tileContent">
                                <h2>Walk title</h2>
                                <p>This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di           Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</p>
                                <div class="transform-border-hairline"></div>
                                <ul class="metadata">
                                    <li class="fromLocation">Forio</li>
                                    <li class="toLocation">Lacco Ameno</li>
                                    <li class="lenght">3 km</li>
                                    <li class="difficulty1"></li>
                                </ul>
                            </div>
                        </div>

                    </div>


                </ul>
            </div>
        </div>
    </section>

    <!--Walk 1 page-->

    <section class="hidden" id="view-walk1">
        <header style="height: 81px;">

            <button class="left arrow" data-vin="view-home" data-sd="sr">
            </button>
            <h1>Walk name</h1>
            <button class="right compass-btn" data-vin="view-compass" data-sd="popin" onclick="loadCompass()">
            </button>
            <button class="right map" data-vin="view-walk1-map" data-sd="popin" onclick="onMapLoad('map_canvas_walk1')">
            </button>
            <div class="nav">
                <button id="btn1" class="active" data-vin="view-tab1Container">
                    <div class="label">Description</div>
                </button>
                <button id="btn2" data-vin="view-tab2Container">
                    <div class="label">Directions</div>
                </button>
            </div>
        </header>
        <div class="scrollMask"></div>
        <div class="scrollWrap">
            <div class="scroll">
                <ul class="content" style="margin-top: 85px;">

                    <div class="active" id="view-tab1Container">
                        <div class="tile walkTile">
                            <img src="images/walk-cover.png"  alt="walk image">
                            <div class="tileContent">
                                <p class="paddingT">This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</p>
                                <p class="fromLocation fromLocationB">Forio</p>
                                <p class="toLocation toLocationB">Lacco Ameno</p>
                                <div class="transform-border-hairline"></div>
                                <ul class="metadata">
                                    <li class="duration">3 ore</li>
                                    <li class="slope">200 m</li>
                                    <li class="lenght">3 km</li>
                                    <li class="difficulty1"></li>
                                </ul>
                            </div>
                        </div>
                        <div class="placeInterest">
                            <h2>Luoghi di interesse</h2>
                            <ul class="arrowed">
                                <div class="transform-border-hairline grey"></div>
                                <li data-vin="view-place1" data-sd="sl" onclick="galleryWalk2()">
                                    <div class="innerLi" >
                                        <div class="museum"> <span> Site of interest 1</span></div>
                                    </div>
                                </li>
                                <li class="no-border" data-sd="sl">
                                    <div class="innerLi">
                                        <div class="museum"> <span>Site of interest 1</span></div>
                                    </div>
                                </li>
                                <div class="transform-border-hairline grey"></div>
                            </ul>
                            <div class="gallery">
                                <figure><a href="images/big/A-15.jpg"><img class="ml" src="images/thumbs/A-15.jpg" alt="Giullari senza Frontiere"></a></figure>
                                <figure><a href="images/big/A-18.jpg"><img src="images/thumbs/A-18.jpg" alt="Giullari senza Frontiere"></a></figure>
                                <figure><a href="images/big/B-21.jpg"><img class="ml" src="images/thumbs/B-21.jpg" alt="Giullari senza Frontiere"></a></figure>
                                <figure><a href="images/big/B-24.jpg"><img src="images/thumbs/B-24.jpg" alt="Giullari senza Frontiere"></a></figure>
                                <figure><a href="images/big/C-72.jpg"><img class="ml" src="images/thumbs/C-72.jpg" alt="Il Conte Schippa"></a></figure>
                                <figure><a href="images/big/C-12.jpg"><img src="images/thumbs/C-12.jpg" alt="Il Conte Schippa"></a></figure>
                                <figure><a href="images/big/C-53.jpg"><img class="ml" src="images/thumbs/C-53.jpg" alt="Il Conte Schippa"></a></figure>
                                <figure><a href="images/big/C-33.jpg"><img src="images/thumbs/C-33.jpg" alt="Il Conte Schippa"></a></figure>
                                <figure><a href="images/big/G-16.jpg"><img class="ml" src="images/thumbs/G-16.jpg" alt="I Giullari di Nessuno"></a></figure>
                                <figure><a href="images/big/G-87.jpg"><img src="images/thumbs/G-87.jpg" alt="I Giullari di Nessuno"></a></figure>
                                <figure><a href="images/big/G-59.jpg"><img class="ml" src="images/thumbs/G-59.jpg" alt="I Giullari di Nessuno"></a></figure>
                                <figure><a href="images/big/G-65.jpg"><img src="images/thumbs/G-65.jpg" alt="I Giullari di Nessuno"></a></figure>

                            </div>
                        </div>

                    </div>
                    <div class=" hidden" id="view-tab2Container">   
                        <ol>
                            <li>This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</li>
                            <li>This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</li>
                            <li>This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</li>
                        </ol>
                    </div>

                </ul>
            </div>
        </div>
    </section>

CSS

scrollWrap {
    height: 100%;*/
    position: relative;
    width: 100%;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;

    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;

}

.scroll {

    position: absolute;
    z-index: 1;
    top:0;

    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background-color: rgb(229, 230, 224);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
.scrollMask {
    width: 100%;
    position: absolute;
    top: 44px;
    bottom: 0;
    background-color: rgb(229, 230, 224);
    -webkit-box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1);
    box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1);
}

section {
    position: fixed;
    width: 100%;
    height: 100%;
}

JAVA SCRIPT

function onBodyLoad()
{
    console.log("subscribing to the deviceready event");
    document.addEventListener("deviceready", onDeviceReady, false);
    App.init();
    loadIscroll();
    console.log('firing iScroll');
    var screenHeight = screen.height;
    console.log(screenHeight);
    var scrollWrapArray = $$('.scrollWrap');
    for (var i = 0; i<scrollWrapArray.length; i++) scrollWrapArray[i].style.height = screenHeight 
    + 'px';

}

function loadIscroll (){
    var wrapper = document.querySelector('section.active .scrollWrap');
    console.log (wrapper);
    myScroll = new IScroll(wrapper, {
    });

}
var App = {
    init: function () {
        FastClick.attach(document.body);

        var tabbtns = $$('.nav button');
        for (var i = 0; i<tabbtns.length; i++) tabbtns[i].addEventListener('click', SwitchTabs, false);

        var navbtns = $$('header button.right, header button.left');
        for (var i = 0; i<navbtns.length; i++) navbtns[i].addEventListener('click', Slide, false);

        var listitems = $$('.homeTile div.tile');
        for (var i = 0; i<listitems.length; i++) listitems[i].addEventListener('click', Slide, false);

        var listitems2 = $$('.arrowed li');
        for (var i = 0; i<listitems2.length; i++) listitems2[i].addEventListener('click', Slide, false);

    }
};

function refreshIscroll () {
    myScroll.refresh();
    console.log('refreshed iscroll');
}


function onDeviceReady () {
    console.log("device ready event received");
}

var Slide = function (callback) {

    var vIn = $('#'+this.dataset.vin),
    vOut = $('section.active'),
    slideType = this.dataset.sd,
    onAnimationEnd = function () {
        vOut.classList.add('hidden');
        vIn.classList.add('active');
        vIn.classList.remove(slideOpts[slideType][0]);
        vOut.classList.remove(slideOpts[slideType][1]);
        vOut.removeEventListener('webkitAnimationEnd', onAnimationEnd, false);
        vOut.removeEventListener('animationend', onAnimationEnd);
        console.log('animation ending');
    };
    console.log(slideType);
    console.log(vIn, vOut);
    vOut.addEventListener('webkitAnimationEnd', onAnimationEnd, false);
    vOut.addEventListener('animationend',       onAnimationEnd);
    if (callback && typeof(callback) === 'function') {
        callback();
    }
    vOut.classList.remove('active');
    vIn.classList.remove('hidden');
    vIn.classList.add(slideOpts[slideType][0]);
    vOut.classList.add(slideOpts[slideType][1]);
    setTimeout(function () {
        refreshIscroll() 
    }, 600);
    myScroll.destroy();
    myScroll = null;
    console.log('destroying', myScroll);
    setTimeout(function () {
        loadIscroll() 
    }, 1000); 
    refreshIscroll();
};

Answer 1

你可以使用java脚本`

scrollTo（XPOS，ypos）

方法

导航视图时，iScroll 5跳转到页面顶部

1 个答案: