Jak programowo przewinąć okno na iPada?

Question

Moja aplikacja zawiera kilka funkcji, które programowo przewijają określone elementy na stronie. Niestety nie działa na Safari/iPadzie. Próbowałem następujące metody przewijania:

window.scroll(0, y); 

window.scrollTo(0, y); 

$(window).scrollTop(y); 

$('html, body').animate({ 
    scrollTop: y 
}); 

czy to po prostu nie możliwe aby programowo przewijać okno na Safari/iPad, albo ja po prostu robi to niepoprawnie? Wszystkie te metody działają we wszystkich przeglądarkach testowanych na komputerze.

Answer 1

Czy wypróbowałeś jakieś biblioteki? http://iscrolljs.com/ wygląda obiecująco, ale nie mogę przetestować (brak urządzenia z systemem iOS).

• Kontrola granularna pozycji przewijania, nawet podczas pędu. Zawsze możesz uzyskać i ustawić współrzędne x, y rolki.
• Po wyjęciu z pudełka wsparcie dla wielu platform. Od starszych urządzeń z Androidem do najnowszego iPhone'a, od Chrome po Internet Explorer.

Answer 2

Nie znalazłem sposobu na programowe przewijanie okna na iPadzie. Jednym z możliwych obejść jest zawinięcie zawartości strony do stałego kontenera div i przewinięcie go przez zmianę właściwości div o wartości scrollTop. Możesz zobaczyć tę metodę w this codepen. Testowałem go z powodzeniem na iPadzie z przeglądarkami Safari i Chrome oraz w systemie Windows z przeglądarką Firefox, Chrome i IE11.

HTML

<div id="container"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
    <div class="div3"></div> 
    ... 
</div> 

CSS

div#container { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow-y: auto; 
} 
div { 
    height: 100px; 
} 
.div1 { 
    background-color: red; 
} 
.div2 { 
    background-color: green; 
} 
.div3 { 
    background-color: yellow; 
} 

JavaScript

var container = document.getElementById("container"); 
setInterval(function() { 
    container.scrollTop += 1; 
}, 20); 

Answer 3

jego pracy w porządku dla mnie na safari i iPad:

$('html, body').animate({ 
     scrollTop: 0 
}, 1000); 

Nie jestem pewien, ale można spróbować go, dając pewne czasy animacji przewijania w milisekundach.

Answer 4

używam następujący kod jQuery i działać na każdej przeglądarce (dont użytkownika IE :))

$("html,body").animate({ 
    scrollTop: 0 
}, "slow"); 

Cross-browser przewijania do góry:

if($('body').scrollTop()>0){ 
     $('body').scrollTop(0);   //Chrome,Safari 
    }else{ 
     if($('html').scrollTop()>0){ //IE, FF 
      $('html').scrollTop(0); 
     } 
    } 

Krzyż -przeglądarkę div z identyfikatorem = identyfikator_testu:

if($('body').scrollTop()>$('#test_id').offset().top){ 
     $('body').scrollTop($('#test_id').offset().top);   //Chrome,Safari 
    }else{ 
     if($('html').scrollTop()>$('#test_id').offset().top){ //IE, FF 
      $('html').scrollTop($('#test_id').offset().top); 
     } 
    } 

Answer 5

Używam wtyczki GreenSock ScrollTo, która działa cuda. Można pobrać go z their website

zaletą jest to, że ma opcje ułatwianie i działa na każdej platformie, etc

$("button").each(function(index, element){ 
    $(this).click(function(){ 
    TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1), offsetY:70}}); 
    }) 
})