scrollLeft/scrollTop을 Safari 6에서 동시에 설정할 수 없습니다.

Question

Safari 6에서 scrollTop 및 scrollLeft 매개 변수를 동시에 설정할 경우 두 축 중 하나만을 실행하고 한 축만 페이지를 스크롤합니다. 이는 기본 JavaScript, jQuery 및 jquery.scrollTo 플러그인을 사용하여 발생합니다. 사용

예 jQuery의 .animate() : 사파리 6 만 예 아니오에서, http://nabble.nl/demo/safari6scrollto/

모든 예제가 예상대로 모든 주요 브라우저에서 잘 작동 :

$('body').animate({ 
    'scrollLeft': 100, 
    'scrollTop': 100 
}, { 
    'duration': 500, 
    'easing': 'swing' 
}); 

내가 여기에 데모 페이지를 설정했습니다. 4, 6 및 7 작업. 아무튼 데모 페이지를 IFRAME에로드하면 (데모 페이지 하단 참조) 모든 것이 올바르게 작동합니다.

Safari의 버그입니까? 그렇다면이 문제를 해결하는 방법은 무엇입니까? 그렇지 않은 경우 원인이 무엇이며 어떻게 해결할 수 있습니까?

기타 관련 보고서 :

• https://github.com/flesler/jquery.scrollTo/issues/9
• http://forum.jquery.com/topic/scrolltop-scrollleft-not-working-in-safari-6
• http://bugs.jquery.com/ticket/12588

Answer 1

나는 OSX 마운틴 라이온에서 작업 jquery.scrollTo 플러그인을 얻을 필요, 나는 '나오지 않았어 이후 이 문제의 원인을 구체적으로 찾아내는 대신, 나는 오히려 추한 해결 방법을 모았습니다. 그것은 사파리 6에서 아무런 문제를주지 않는다 jQuery의 .animate()의 단계 기능에 window.scrollTo(x, y)를 사용

var left; 
$(window).animate({ 
    'pageXOffset': 100, 
    'pageYOffset': 100 
}, { 
    duration: 500, 
    easing: 'swing', 
    step: function(now, fx) { 
     if (fx.prop == 'pageXOffset') { 
      left = now; 
     } else if (fx.prop == 'pageYOffset') { 
      window.scrollTo(left, now); 
     } 
    } 
}); 

단계 기능 (의 애니메이션에 적용되는 모든 요소에 대한 모든 애니메이션 속성이라고 있습니다 우리의 경우는 1 : window). 따라서 중간 변수는 애니메이션에서 현재 X 위치를 저장합니다.

IT는 window 개체의 pageXOffset 및 pageYOffset 속성을 사용하기 때문에 나는이 해결 방법이 아닌 윈도우 객체의 scrollLeft 및 scrollTop 속성을 애니메이션이 얼마나 적합 모르겠어요.

어쨌든, 원했던 모든 문서를 스크롤하는 데 사용되며 Safari 6에서도 매우 부드럽게 작동합니다!