scrollLeft와 scrollTop을 동시에 설정하십시오

Question

div의 scrollLeft와 scrollTop을 동시에 설정할 수있는 방법이 있습니까? 크롬, 사파리 및 오페라에서는 순차적으로 설정하지만 Firefox (4 이전)와 IE (IE9에서도)에서 설정하면 바로 그 중 하나를 설정하면 리플 로우가 발생하여 페이지가 먼저 왼쪽 아래로 이동하기 때문에 추악한 결함이 발생합니다. 계단 운동처럼.

나는이 창에 scrollTo (x, y)라는 메서드가 있다는 것을 알았습니다. 보통 div에 해당하는 항목이 있습니까?

또는 단순히 스크롤을 변경하더라도 리플 로우가 발생하지 않도록 브라우저 동작을 변경할 수 있습니까? 내가 발견 한 한 소스는 div에 등록 된 onscroll-event를 가지고 있지만 문제가 될 수없는 이벤트가없는 경우에만 발생합니다.

Answer 1

scrollLeft 및 scrollTop을 사용하면 안되며 .animate()를 사용하여 scrollLeft 및 scrollTop을 설정해야합니다.

.animate({ 
    .scrollLeft: x, 
    .scrollTop: y 
}) 

또한 프로세스를 단순화하기 위해 http://plugins.jquery.com/project/ScrollTo에서 내장 된 몇 가지 플러그인이 있습니다.

Answer 2

나는 애니메이션이 (그것을 할 것 대부분의 자바 스크립트 프레임 워크)에 대한 최선의 방법이 될 것이라고 상상하지만, 당신은 또한이 시도 할 수 :이 같은 문제가 발생했다

setTimeout("verticalScrollFunction", 1); 
setTimeout("horizontalScrollfunction", 1); 

Answer 3

단지 순간 전. 나는 애니메이션 제안이 좋지 않다는 것을 알았지 만, 그와 함께 제공된 jQuery 플러그인은 적어도 조금 나아졌다. 나에게 필요한 오버 헤드는 작은 이득을 얻을 가치가 없었다.

내 경우에는 하나의 큰 이미지가있는 스크롤 가능한 div가 있습니다. 이 이미지가 클수록 리플 로우가 심합니다. 스크롤 속성을 설정하기 직전에 div30을 숨긴 다음 바로 다시 표시하는 에 의해 상황을 대폭 개선 할 수있었습니다.. 이 은 첫 번째 속성이으로 설정된 후에 IE가 내용을 다시 렌더링하는 것을 무시하고 대신 요소가 모두 표시 될 때까지 대기합니다 (둘 다 설정된 후에).

모든 주요 브라우저의 현재 버전에는 깜박임이없는 것 같습니다 (내 첫 번째 관심사였습니다). 파이어 폭스 4, 오페라 11, 크롬 10, IE 8, IE8 호환성 및 Safari에서 테스트 5. jQuery를에

:

var my_pane = $('#my_scroll_pane'); 
my_pane.css('visibility', 'hidden'); 
my_pane.scrollTop(100).scrollLeft(100); 
my_pane.css('visibility', 'visible'); 

일반 OLE '자바 스크립트 :

var scroll_pane = document.getElementById('my_scroll_pane'); 
scroll_pane.style.visibility = 'hidden'; 
scroll_pane.scrollTop = 100; 
scroll_pane.scrollLeft = 100; 
scroll_pane.style.visibility = 'visible'; 

UPDATE : 이것은 FF3.6에서 꽤 대략 깜박입니다. 브라우저 스니핑을 포함하지 않는 아이디어가 있다면 누구나 환영 할 것입니다.

Answer 4

스크롤보다는 절대 위치 지정 또는 여백 빼기를 사용하십시오.