scrollTop w telefonie komórkowym Safari nie działa

Question

Spędziłem ostatnią godzinę czytając wiele pytań dotyczących powiększania i .scrollTop() oraz odmian obsługi i próbowałem co najmniej 20 różnych rzeczy - wszystkiego, co wyglądało na wykonalne zdalnie w mojej sytuacji, a ja wciąż mieć tylko częściowe rozwiązanie.

Mam formularz, który ma trzy pola i przycisk, aby kontynuować. Przycisk Kontynuuj otwiera resztę formularza. Safari mobile powiększa się po wybraniu pól tekstowych. Nie przeszkadza mi to szczególnie. Jeśli zapobiegam powiększeniu, może to być zbyt małe, aby odczytać pola, a jeśli ładuję się na czytelnym poziomie powiększenia, widoczna jest tylko część strony, więc zmiana powiększenia jest dobra.

Sytuacja jest taka, że ​​po kliknięciu przycisku i pojawieniu się drugiej połowy formularza, okno jest nadal powiększane i patrzysz na losową poprawkę strony.

Z tego, co mogę sobie wyobrazić, że może być dwa przeładunki:
1) Właściwie powiększanie się po kliknięciu przycisku
2) Przewijanie gdzie kolejna część postaci zjawia

Próbowałem wszystkiego Mógłbym znaleźć na pomniejszeniu i obsługi viewport content width w tagu meta nie ognia, ale nie obsługuje go dla mnie, ponieważ po prostu sprawia, że ​​obszar wyświetlania większy lub mniejszy i faktycznie nie pomniejszać w ogóle. Potencjalnie to działa dla innych, ale nie dla mnie, ponieważ mam już wiele stylizacji, co może sprawić, że nie będzie to możliwe.

Załatwiłem rozwiązanie przewijania i .scrollLeft() działa poprawnie, ale .scrollTop() nie zadziała, nie ważne jaki selektor mu podaję. Próbowałem:

$('body').scrollTop 
$('html').scrollTop 
$('document').scrollTop 
$('body,html,document').scrollTop 
$('html:not(:animated),body:not(:animated)').scrollTop 
$('html:not(:animated),body:not(:animated),document:not(:animated)').scrollTop 
$('#content').scrollTop // that's a wrapper div 
$(window).scrollTop 

ktoś wie jak dostać .scrollTop() pracować w Safari Mobile?

Answer 1

Nie trzeba używać jQuery to zrobić:

window.scrollTo(0, 0); 

Można również uniemożliwić powiększanie wszystko razem za pomocą metatagu:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

może chcesz to zrobić na tylko strony, której z problemami?

Answer 2

Czy próbowałeś użyć kotwic?

Powinny działać wszędzie, ponieważ są natywną funkcją przeglądarek.

Original post z tym kodem here

$(function() { 
    $('a[href*="#"]:not([href="#"])').on('click', function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Answer 3

myślę, że jesteś stara się rozwiązać rzeczy w niewłaściwy sposób. Upewnij się tylko, że pola formularza mają font-size: 16px w przenośnych rzutniach, w ten sposób Safari nie będzie się powiększało.

Również scrollTop może nie działać, jeśli masz position: fixed na swoim kontenerze.