는 사용 jQuery를 내가 내 응용 프로그램에서 긴 수직 데이터 입력 양식이 긴 수직 형태

를 스크롤합니다. 양식을 탭하고 페이지의 보이는 부분의 하단에 도달하면 페이지는 현재 포커스가있는 필드를보기로 스크롤합니다 (포커스는 항상 화면 아래쪽에 유지됩니다). 집중할 다음 필드를 결코 볼 수 없으므로 귀찮은 일입니다. jQuery를 사용하여 초점을 맞출 때 창 상단으로 초점을 맞춘 필드를 자동으로 스크롤하는 것을 좋아합니다 (포커스를 받기 전에 보이는 영역에 있지 않은 경우에만). 플러그인을 본 사람이나 나를 시작하는 법을 아십니까? 정확하게 당신이 원하는 무엇을 "scrollIntoView"라는 HTML 요소 방법이있다는 사용 jQuery를 내가 내 응용 프로그램에서 긴 수직 데이터 입력 양식이 긴 수직 형태

출처

2011-01-12 Jason Butera

. (구형 브라우저에서는 작동하지 않지만 IE9, Firefox3 및 Chrome에서는 테스트했습니다.)

또는, 당신은 가능성이 얻을 jQuery의 .offset()와 .scrollTop() 함수를 사용할 수 있습니다/문서의 스크롤 위치 및 손에있는 요소를 설정합니다.

<script src="jquery-1.4.4.js"></script> 
    <script> 
     function OnFocus(evt) { 
      this.scrollIntoView(true); 
     } 

     window.onload = function (evt) { 
      $("input").focus(OnFocus); 
     }; 

    </script> 

</head> 


<body> 

<input type="text" id="text1" value="text1"/> <p>&nbsp;</p> 
<input type="text" id="text2" value="text2"/> <p>&nbsp;</p> 
<input type="text" id="text3" value="text4"/> <p>&nbsp;</p> 
<input type="text" id="text4" value="text5"/> <p>&nbsp;</p> 
<input type="text" id="text5" value="text6"/> <p>&nbsp;</p> 
<input type="text" id="text6" value="text6"/> <p>&nbsp;</p> 
<input type="text" id="text7" value="text7"/> <p>&nbsp;</p> 
<input type="text" id="text8" value="text8"/> <p>&nbsp;</p> 
<input type="text" id="text9" value="text9"/> <p>&nbsp;</p> 
... 
<input type="text" id="text34"/> <p>&nbsp;</p> 

</body>

출처

2011-01-12 08:24:49 selbie

scrollIntoView 항상 정확하게 I가 ... 내 필드 레이블이 텍스트 상자 위에 위치 특히 이후 찾고 무엇을하지 않은 상단에 초점을 맞춘 필드를 유지합니다. –

정확히 원하는 것은 아니지만 페이지의 특정 요소에 다음을 추가하기로 결정했습니다.

function ScrollToTop(object) { 
    $('html,body').animate({ scrollTop: $(object).offset().top - 30 }, 1000, 'linear'); 
}

그리고 특정 요소에

onfocus="ScrollToTop(this);"

내가 기대했다하지 하드 코드 포커스 이벤트를합니다. 바인딩 할 수 있고 내 스크립트를 실행할 수있는 "scrollingIntoView"이벤트가 있으면 좋을 것입니다. 어쨌든, 내 솔루션은 멋지고 우아합니다.

출처

2011-01-12 15:44:28

는 사용 jQuery를 내가 내 응용 프로그램에서 긴 수직 데이터 입력 양식이 긴 수직 형태

답변

관련 문제