2012-04-18 3 views
1

화면에 어딘가에 스크롤 가능한 div가 있습니다.스크롤 가능한 div 중심 뷰의 자식 배치

나는 어딘가에 그 div의 자식이있다.

div를 스크롤하여이 하위를 보이는 영역의 가운데에 배치하려면 어떻게해야합니까?

(내가 사업부의 가시적 폭과 높이를 결정 얼마나, 그리고 어떻게이 중심으로 직사각형 컨트롤을 배치 스크롤 것?)

+0

를 사용해야하거나 사용자가 일부 라이브러리, jQuery를 예를 들면? – antyrat

+0

나는 순수한 JS를 선호한다. jQuery로 그것을하는 방법을 설명하는 것은 당연히 다른 독자들에게 유용 할 수 있습니다. 나는 그것도 upvote하려고합니다;) – Will

답변

0

element.scrollIntoView()은 당신을 위해 무엇을 찾고 수 있습니다.

scrollIntoView docs

+0

어떻게 센터링합니까? – Will

+0

스크롤 영역의 크기와 일치하는 요소에 대해'scrollintoview()'를 사용하고 해당 요소의 내용을 중앙에 배치하여이 작업을 수행 할 수 있습니다. –

+0

어떻게 가시 영역의 크기를 결정하겠습니까? – Will

0

당신이 jQuery를 사용하는 경우

http://jsfiddle.net/a9s2G/

당신은 scrollTo 플러그인을 시도 할 수 있습니다.

순수한 js에서는 element.scrollTop을 사용할 수 있습니다. 요소의 위치를 ​​<div> 안에 넣고 해당 값을 사용하여 scroll main div를 사용해야합니다.

내부 요소 위치를 계산하려면 offsetTopoffsetLeft 속성을 사용하여 부모 요소와 관련된 위쪽 및 왼쪽 속성 오프셋을 가져와야합니다.

당신의 요소를 중심으로하기 위해 당신은 또한 당신은 순수 JS를 사용하는 것을 할 필요가 element.scrollLeft

+0

'scrollTop'과'scrollLeft'에 보낼 오프셋을 어떻게 계산합니까? – Will

+0

내 질문을 업데이트했습니다. – antyrat

+0

확실히 div의 보이는 크기를 알아야합니까? 콘텐츠 크기를 얻는 방법을 알아 냈지만 창 크기가 아닌 – Will