Upoštevajte, da je bila ta objava na blogu objavljena junija 2015, zato so nekateri deli morda zastareli, odvisno od tega, kdaj jo berete. Žal teh objav ne morem vedno v celoti posodabljati, da bi zagotovil točnost informacij.
- Moja testna stran
- Razumevanje privzetega vedenja
- Razumevanje, kaj počne CSS pravilo "-webkit-overflow-scrolling"
- Uporabnik mora počakati, da se konča učinek elastičnega traku
- Kako preprečiti pomikanje ozadja strani
- Kako preprečiti prekomerno pomikanje ozadja strani
- Kako preprečiti pomikanje v ozadje strani
- Celotna izvorna koda strani
Da bi odpravili nedavni problem s pomikanjem v Safariju na iOS, sem moral ustvariti svojo preprosto testno stran in nato uporabiti vse informacije ter kombinacije, ki sem jih našel na internetu, da bi poskušal rešiti težavo.
Spodaj je kratek pregled tega, kar sem odkril med tem postopkom.
Moja testna stran
Moja testna stran je bila precej preprosta. V statičnem div-u so bili vzorčni podatki, ki naj bi predstavljali 'stran', skupaj s fiksnim div-om, ki naj bi predstavljal prekrivni 'meni' nad stranjo, takole.
Celotna izvorna koda strani je na voljo na dnu tega prispevka na blogu.
Razumevanje privzetega vedenja
Najprej sem poskušal razumeti privzeto vedenje Safarija na iOS-u. Najbolj opazna ugotovitev je bila, da ko se pomaknete do dna menija, telo strani pokaže 'gumijasti učinek' – značilnost, ki je v Safariju vnaprej zakodirana.
Enako se je zgodilo tudi, ko sem se pomaknil na sam vrh menija.
Vendar pa sem najprej opazil problem: če se neprestano pomikate do samega vrha ali dna, Safari začne prikazovati grafične napake pri izrisu tako na ozadju strani kot v meniju.
Nisem prepričan, zakaj, ampak sumim, da ima to povezavo z elastičnim učinkom pri vlečenju.
Razumevanje, kaj počne CSS pravilo "-webkit-overflow-scrolling"
Naslednja stvar, ki sem jo naredil, je bila uporaba CSS pravila -webkit-overflow-scrolling na meniju, ki omogoča pomikanje z momentumom.
Kot je prikazano na spodnji sliki, se pomikanje nadaljuje tudi potem, ko potegnem s prstom.
Ampak pri pomikanju do vrha ali dna se pojavi tudi učinek elastike, kot je prikazano spodaj.
Uporabnik mora počakati, da se konča učinek elastičnega traku
Med testiranjem sem opazil tudi, da uporabnik med trajanjem učinka elastičnega raztezanja ne more preusmeriti pozornosti na drug element, dokler se animacija popolnoma ne konča.
V spodnjem primeru najprej pomikam stran v ozadje, nato pa hitro poskusim pomakniti meni, vendar se na koncu še vedno pomikam po strani v ozadju namesto tega.
Vendar pa, če počakam trenutek, da se učinek konča, lahko nato začnem pomikati po meniju.
Kako preprečiti pomikanje ozadja strani
Med testiranjem sem opazil, da uporabnik med trajanjem elastičnega učinka ne more preusmeriti fokusa na drug element, dokler animacija ni popolnoma končana.
Na podlagi tega odgovora na Stack Overflow, lahko zagotovite, da elementi z disable-scrolling ne sprožijo svojega privzetega pomikanja, ko se sproži dogodek touchmove.
document.ontouchmove = function(event) {
var isTouchMoveAllowed = true,
target = event.target;
while (target !== null) {
if (target.classList && target.classList.contains('disable-scrolling')) {
isTouchMoveAllowed = false;
break;
}
target = target.parentNode;
}
if (!isTouchMoveAllowed) {
event.preventDefault();
}
};
In nato dodajte razred disable-scrolling na div strani:
<div class="page disable-scrolling">
Tako nekako deluje, vendar bolj obsežno testiranje kaže, da se ozadje strani še vedno občasno pomakne, ko dosežete vrh ali dno menija.
Kako preprečiti prekomerno pomikanje ozadja strani
S tem popravkom je mogoče preprečiti "overscrolling". To pomeni, da ko se element pomika do svojega vrha ali dna, se pomikanje ne nadaljuje v telo strani.
Zaradi tega se telo spletne strani ne more pomikati, kar prav tako prepreči pojav elastičnega učinka pri pomikanju.
function removeIOSRubberEffect(element) {
element.addEventListener("touchstart", function() {
var top = element.scrollTop,
totalScroll = element.scrollHeight,
currentScroll = top + element.offsetHeight;
if (top === 0) {
element.scrollTop = 1;
} else if (currentScroll === totalScroll) {
element.scrollTop = top - 1;
}
});
}
removeIOSRubberEffect(document.querySelector(".scrollable"));
Ta del JavaScript kode poskrbi, da element nikoli ne pride do vrha ali dna zaslona, ampak ga drži le 1 piksel stran od vrha ali dna zaslona.
Če položaj pomikanja nikoli ne doseže absolutnega vrha ali dna, prekomerno pomikanje ni mogoče.
Kako preprečiti pomikanje v ozadje strani
Če želite odstraniti učinek elastičnega pomikanja iz menija - bodisi iz estetskih razlogov ali zato, ker je, kot pri meni, povzročal dodatne napake pri izrisu - preprosto odstranite CSS pravilo -webkit-overflow-scrolling.
Vendar pa, kot lahko vidite spodaj, izgubite tudi inercijo gladkega pomikanja.
Celotna izvorna koda strani
Tukaj je celotna izvorna koda strani.
<!-- License MIT, Author Special Agent Squeaky (specialagentsqueaky.com) --> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style> .page{ font-size: 24px; overflow: scroll; } .menu{ position: fixed; top: 0; bottom: 0; left: 0; width: 80%; background: gray; z-index: 1; font-size: 10px; overflow: scroll; /* uncomment to get smooth momentum scroll, but also a rubber band effect */ /*-webkit-overflow-scrolling: touch;*/ } .menu-item{ padding: 10px; background: darkgray; font-size: 24px; } </style>
</head>
<body>
<div class="menu scrollable">
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
<div class="menu-item">hello world</div>
</div>
<div class="page disable-scrolling">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<script>
document.ontouchmove = function(event) {
var isTouchMoveAllowed = true,
target = event.target;
while (target !== null) {
if (target.classList && target.classList.contains('disable-scrolling')) {
isTouchMoveAllowed = false;
break;
}
target = target.parentNode;
}
if (!isTouchMoveAllowed) {
event.preventDefault();
}
};
function removeIOSRubberEffect(element) {
element.addEventListener("touchstart", function() {
var top = element.scrollTop,
totalScroll = element.scrollHeight,
currentScroll = top + element.offsetHeight;
if (top === 0) {
element.scrollTop = 1;
} else if (currentScroll === totalScroll) {
element.scrollTop = top - 1;
}
});
}
removeIOSRubberEffect(document.querySelector(".scrollable"));
</script>
</body>
</html>
