scrollTop 모바일 Safari가 작동하지 않습니다.

Question

나는 확대/축소와 .scrollTop() 및 다양한 처리 방법에 대한 다양한 질문을 통해 지난 1 시간 동안 읽었으며 적어도 20 가지 다른 것들을 시도했습니다. 내 상황에 대해 원격으로도 작동 할 수있는 모든 것 및 여전히 부분적인 해법 만있다.

나는 세 개의 필드와 버튼을 가지고있는 폼을 가지고 있습니다. 계속 단추는 나머지 양식을 엽니 다. Safari 모바일은 텍스트 필드를 선택할 때 확대됩니다. 나는 특히 신경 쓰지 않는다. 확대/축소를 방지하면 필드를 읽는 데 너무 작아 질 수 있으며 읽을 수있는 확대/축소 수준에서로드하면 페이지의 일부만 볼 수 있으므로 확대 동작이 정상입니다.

상황을 단추를 클릭 한 후 폼의 다른 절반이 나타나면 여전히 확대 된 및 페이지의 임의의 패치보고 있습니다. 나는 두 handlings이있을 수 상상할 수있는 일부터

:
1) 실제로 양식의 다음 부분은

나타 어디 모든 노력에 버튼
2) 스크롤을 클릭 한 후 축소 축소 아웃에서 찾을 수 있으며 meta 태그의 viewport content width을 처리하는 것은 시작되지만 뷰포트를 더 크게 또는 작게 만들고 실제로 축소하지 않으므로 처리하지 못합니다. 잠재적으로 이것은 다른 사람들에게는 효과적이지만, 나는 그것을 할 수없는 많은 스타일링을 이미 가지고 있기 때문에 나를 위해서가 아닙니다.

나는 스크롤링 솔루션을 사용하기로 결정했으며 .scrollLeft()은 정상적으로 작동하지만 .scrollTop()은 내가 제공하는 선택기와 상관없이 작동하지 않습니다. 나는 시도했다 :

$('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 

누구가 .scrollTop() 사파리 모바일에서 작동하도록하는 방법을 알아?

Answer 1

이 할 jQuery를 사용할 필요가 없습니다 :

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

당신은 당신이 바로 페이지에서이 작업을 수행 할 수 있습니다 :

window.scrollTo(0, 0); 

당신은 또한 확대 모두 함께 사용하여 메타 태그를 방지 할 수 있습니다 문제가 있습니까?

Answer 2

앵커를 사용하려고 했습니까?

그들은 브라우저의 기본 기능이기 때문에 모든 곳에서 작동해야합니다. 이 코드 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

내가 잘못된 방법으로 일을 해결하려는 생각을 가진

원래 게시 할 수 있습니다. 휴대 전화 뷰포트에 양식 필드가 font-size: 16px인지 확인하십시오. 이렇게하면 Safari는 확대되지 않습니다.

position: fixed 컨테이너에 있으면 scrollTop이 작동하지 않을 수도 있습니다.