iPad Mobile Safari/iOs scroll probleeme

  |   by kadriad   |   Blogi, javascript, jQuery  |  No Comments

Täiendus – 25.03.2014

Olen kasutanud onepager-i skrollimisel jquery scrollTo skripti:

http://demos.flesler.com/jquery/scrollTo/

Väga hea skroll-skript, saab panna mitu asja korraga, näiteks:

jQuery.scrollTo( '.coursesection', 1200, {offset:-103,easing:'easeOutSine'} );

Näiteks, kui on fixed header ja siin näites on ka easing juurde pandud (siis ka panna easing-skript juurde).

Selle skrollimisega oli probleeme nii iPadis kui androidis.

Ipadi probleemile on lahendus lihtne, on vaja panna juurde axis:’y’. Näide:

jQuery.scrollTo( '.aboutussection', 1200, {offset:-103,'axis':'y'} );

Ipadi lahenduse leidsin siit:

http://stackoverflow.com/questions/11210292/jquery-scrollto-plugin-becomes-jerky-on-ios

Täiendus – 15.11.2012

Ülesandeks oli lehe lõpu leidmine ja siis uue sisu laadmine.

Selleks on olemas täiesti tore javascript:

window.onscroll = function() {
if(jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height() ){

Probleem tekib sellest, et iPad jne seadmed reageerivad, kui pikslipealt tabada. Nt iPad võib näpuga tõmbamisel leht minna allapoole ja siis iPad eelnevale skriptile ei reageeri.

Selle vastu aitab:

if(jQuery(window).scrollTop() <= jQuery(document).height() - jQuery(window).height() ){

Ise panin sama skripti nii arvutile kui muudele seadmetele.

Abi sain siit:

http://stackoverflow.com/questions/11172917/jquery-detect-bottom-of-page-on-mobile-safari-ios

Algne tekst

iPad/iPhone/iPod-ga võib tekkida veebilehti sirvides mitmeid probleeme.

Näiteks ei toeta iOs op-süsteem/veebilehitseja css position:fixed – näiteks, kui on soovi, et lehe footer või header oleks püsivalt lehe üla- või alaservas.

Üks lahendus on järgmine – et footer või header liigub koos lehe scrollimisega kaasa.

Fixed position iseenesest töötab, aga nupud peale scrolli enam ei tööta.

Katsetasin ka muid lahendusi, aga mitte ükski ei töötanud.

window.onscroll = function() {
document.getElementById('fixedDiv').style.top =
(window.pageYOffset + window.innerHeight - 25) + 'px';
};

Kogu info on siin:

http://stackoverflow.com/questions/743123/fixed-positioning-in-mobile-safari

Siin on ka seletusi mobile safari eripärade kohta – kuna animate scroll ei toimi.

http://stackoverflow.com/questions/8359748/ipad-jquery-animatescroll-issues

scrollTop() and scrollLeft() aren’t supported on iPad. Try window.pageYOffset and window.pageXOffset.

JQuery Mobile  touch ja swipe plugin on siin:

http://tuts.pinehead.tv/2011/05/22/299/