모바일 장치 용 텍스트 입력 포커스의 스크롤 페이지가 필요합니까?

Question

입력 할 때 목록을 필터링하는 텍스트 입력으로 모바일에 최적화 된 사이트 만들기. 이것과 비슷합니다 : http://jquerymobile.com/test/docs/lists/lists-search.html

휴대 전화의 경우 입력을 선택하면 페이지가 아래로 스크롤되어 입력이 페이지 상단에있는 경우 유용합니다. 그렇게하면 입력하는 동안 아래 목록의 대부분이 표시됩니다. 이것이 가능한가요? 그리고/또는 누군가 그것을 경험 한 경험이 있습니까? 감사합니다

Answer 1

동의 - 그건 유용성 좋을거야. 당신이 jQuery를 사용하는 경우

,이 트릭을 수행해야합니다

$('#id-of-text-input').on('focus', function() { 
    document.body.scrollTop = $(this).offset().top; 
}); 

Answer 2

는 더 나은 솔루션은 다음과 같습니다 offsetTop (또는 .offset().top jQuery를 사용하는 경우)가를 반환

$('#id-of-text-input').on('focus', function() { document.body.scrollTop += this.getBoundingClientRect().top - 10 });

때문에 처음부터 거리가 부모인데, 여기에서 document의 상단부터 거리가 필요합니다.

getBoundingClientRect().top은 현재 뷰포트 위치에서 요소 (u.e.)까지의 거리를 반환합니다. 요소 아래로 300 픽셀 스크롤하면 -300이 반환됩니다. 따라서 +=을 사용하여 거리를 추가하면 요소로 스크롤됩니다. -10은 선택 사항입니다. 상단에 약간의 공간을 허용합니다.