0
我爲我的ios phonegap應用程序使用iscroll 5以解決閃爍我的固定標題的問題。我正在使用單個頁面佈局，每次更改視圖時，我都會初始化一個新的myScroll變量。 我已經在佈局中測試了結果，並且在視圖之間來回導航時注意到以下行爲： -動畫之後，頁面以其先前的滾動位置顯示，然後跳回到頂部。iScroll 5在瀏覽視圖時跳轉到頁面頂部
我試過使用不同的超時組合來創建新的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();
};