[Javascript] iOS의 Safari에서 스크롤하는 동안 스크롤 위치를 모니터링하려면 어떻게해야합니까?


Answers

"Skrollr"자바 스크립트 라이브러리를 사용하는 것이 좋습니다. 현재까지 발견 된 최고의 모바일 스크롤 애니메이션 옵션이며 빠르게 시작하고 실행하기가 쉽습니다. 시작 및 끝 스크롤 위치를 기반으로 애니메이션을 만들고 CSS를 조작합니다. 대부분의 표준 CSS 속성에 필요한만큼의 데이터 스크롤 위치 및 애니메이션을 만듭니다.

다음 예제에서 배경색은 500 픽셀 스크롤 동안 애니메이션이됩니다.

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

Git의 저장소 체크 아웃 : https://github.com/Prinzhorn/skrollr

Skrollr 데모 예 : http://prinzhorn.github.io/skrollr/

굉장한 현실 세계의 예 : http://www.fontwalk.de/03/

Question

나는 현재 $(window).bind('scroll', foo); $ (window) .scrollTop ()을 모니터하고 시차 효과를 만들기 위해 할 일을하십시오.

모든 데스크탑 브라우저에서 foo ()는 각 픽셀에 대해 호출되며 사용자가 스크롤하면 모든 것이 멋지고 멋지게됩니다. iOS의 Safari에서 스크롤 이벤트는 스크롤이 끝난 후에 만 ​​실행됩니다.

나는 $(window).bind('touchmove', foo); iOS에서 스 와이프 중에 함수가 호출되는지 확인하기 위해 조금 더 알아 챘습니다. 사용자가 손가락을 떼면 페이지는 계속 스크롤되지만 이벤트는 중지됩니다.

어떤 아이디어?




상자에서 꺼내는 것은 불가능하지만, 말하자면 iscroll 을 사용하여 할 수 있습니다.

iOS 용 iScroll과 Android 모바일 기기 / 태블릿을 사용하고 현재 데스크톱 기기에서 사용중인 방식을 사용합니다.

iScroll에는 'onScrollMove', 'onBeforeScrollEnd', 'onTouchEnd'등과 같은 특정 이벤트에서 콜백 함수를 호출 할 수있는 여러 옵션이 있습니다. 불행히도 "모든 위치 변경, 즉 변경 사항을 포함하여 콜백을 실행할 수있는 옵션이 없습니다 사용자가 화면을 만지는 것을 멈춘 후에 스크롤링의 기세로 인해 발생합니다. " 그러나 하나를 추가하기는 쉽습니다.

iScroll 소스에서 127 행 근처의 "// Events"주석 근처에 새 변수를 추가하십시오.

onPosChange: null

그런 다음 "_pos"함수의 끝에 308 행 주위에 다음 행을 추가하십시오.

if (this.options.onPosChange) this.options.onPosChange.call();

( "onPosChange"옵션에 전달 된 함수를 호출합니다).

다음 예제 코드는 id = "iscroll_container"인 div에 대해 iScroll을 설정하고 변경 될 때마다 Y 오프셋을 콘솔에 인쇄합니다.

var myScroll;
function loaded() {
    myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

function actOnScroll(){
    console.log('got a scroll move! Vert offset is: ' + myScroll.y);
}

참고로 Ben the Bodyguard Parallax Site 는 iScroll을 사용하여 iPad에서 작동합니다 (이전 버전의 iscroll을 사용하며 정확하게 설명하지 않습니다)

또한 Life of Pi Parallax Site 는 iPad에서 정말 멋지게 작동합니다. 어떻게 작동하는지 알 수는 없지만 적어도 가능하다는 것을 증명합니다.




대부분의 휴대 기기에서 스크롤하는 동안 자바 스크립트가 실행되지 않습니다. 밖에 몇 가지 해결 방법이 있습니다. Iscroll은 css-technique "transform"을 사용하고 있습니다. 그러나 스크롤하는 동안 javascript를 실행할 수있는 방법은 없습니다. 나는 부드러운 스크롤 알고리즘이 너무 비싸다고 생각합니다.