[ skrollr | 스크롤 기반 애니메이션 > 모바일디바이스 이슈 ]

[ skrollr | 스크롤 기반 애니메이션 > 모바일디바이스 ]

원본 : https://github.com/Prinzhorn/skrollr#skrollrinitoptions

<< 원문내용 >>

Mobile support

Starting with version 0.5.0 skrollr officially supports mobile browsers including Android and iOS. Furthermore, mobile support has been rewritten from scratch for skrollr 0.6.0.

The Problem with mobile and the solution

(If you're not interested in the details, just scroll down a bit to see what you need to do for mobile support.)

Some words on why this is an important milestone and why others failed: Mobile browsers try to save battery wherever they can. That's why mobile browsers delay the execution of JavaScript while you are scrolling. iOS in particular does this very aggressively and completely stops JavaScript. In short, that's the reason why many scrolling libraries either don't work on mobile devices or they come with their own scrollbar which is a usability nightmare on desktop. It was an important requirement while I developed skrollr that I don't force you to scroll the way I want it. skrollr on desktop uses a native scrollbar and you can scroll the way you want to (keyboard, mouse, etc.).

You just told me it doesn't work on mobile, but why does it? The answer is simple. When using skrollr on mobile you don't actually scroll. When detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content (more specific the #skrollr-body element) using CSS transforms.

What you need in order to support mobile browsers

Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id skrollr-body. That's the element we move in order to fake scrolling. The only case where you don't need a #skrollr-body is when using position:fixed exclusively. In fact, the skrollr website doesn't include a #skrollr-body element. If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the #skrollr-body element.

Or to put it differently: On mobile the skrollr-body element is moved using CSS transforms. You can't have position:fixed or background-attachment:fixed inside elements which use CSS transforms as per CSS spec (http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/). That's why those elements need to be outside of the skrollr-body element.

The skrollr-body element might be configured within the init-options.

<< 번역내용 >>

모바일 지원

버전 0.5.0부터 skrollr는 Android 및 iOS를 포함한 모바일 브라우저를 공식 지원합니다.

또한 모바일 지원은 skrollr 0.6.0에서 처음부터 다시 작성되었습니다.

모바일 및 솔루션의 문제점

(세부 정보에 관심이 없다면 조금 아래로 스크롤하여 모바일 지원을 위해 필요한 사항을확인하십시오.)

왜 이것이 중요하고 다른 이유가 실패한 이유에 대한 몇 가지 말씀 : 

모바일 브라우저는 가능한 한 배터리를 절약하려고합니다. 

이것이 모바일 브라우저가 스크롤하는 동안 JavaScript 실행을 지연시키는 이유입니다. 

특히 iOS는이 작업을 통해 매우 적극적으로 JavaScript를 완전히 중단시킵니다. 

즉, 많은 스크롤링 라이브러리가 모바일 장치에서 작동하지 않거나 데스크톱에서 사용하기 어려운 이유입니다. 

제가 skrollr를 개발하는 동안 중요한 요구 사항이었습니다. 

내가 원하는 방식으로 스크롤하도록 강요하지 않았습니다. 

데스크탑에서 skrollr는 네이티브 스크롤 막대를 사용하며 원하는대로 스크롤 할 수 있습니다 (키보드, 마우스 등).

방금 모바일에서 작동하지 않는다고했는데 왜 그럴까요? 대답은 간단합니다. 

모바일에서 skrollr를 사용하면 실제로 스크롤하지 않습니다. 

모바일 브라우저를 감지하면 skrollr은 기본 스크롤을 비활성화하고 대신 터치 이벤트를 수신하고

CSS 변형을 사용하여 콘텐츠 (더 구체적으로 #skrollr-body 요소)를 움직입니다.

모바일 브라우저를 지원하기 위해 필요한 것

skrollr 0.6.0부터 시작해야 할 일은 다음과 같습니다. 

페이지에 id="skrollr-body" 요소를 포함시킵니다. 이 것이 스크롤링을 위조하기 위해 이동하는 요소입니다. 

#skrollr-body가 필요없는 유일한 경우는 position : fixed 만 사용하는 경우입니다. 

실제로 skrollr 웹 사이트에는 #skrollr-body 요소가 포함되어 있지 않습니다. 

fixed 요소와 non-fixed 요소 (i.e. static)가 모두 필요한 경우 static 요소를 # skrollr-body 요소 안에 넣습니다.

또는 다르게 표현하기 : 

모바일에서 skrollr-body 요소는 CSS 변환을 사용하여 움직입니다. 당신은 element에 CSS를 변환하는 position : fiex 또는 background-attachment: fiex 을 사용할 수 없습니다 (http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements -with-css-transforms /). 

그래서 그 element는 skrollr-body 요소 외부에 있어야합니다. skrollr-body 요소는 skrollr의 init 옵션 안에 구성 될 수 있습니다.

[ HTML ]

    
    
       

          some contents
       

    

[ CSS ]

#skrollr-body{}
#skrollr-body div.container{height: 1000px;}
#skrollr-body div.container > div{width:100%; text-align:center; padding:20px; color:#fff; position:fixed; top:50%; left:0; margin-top:-20px;}

[ JS ]

// 모바일 디바이스에서도 scrollTop값이 구현되는지 확인할 수 있다
console.log($(window).scrollTop());

skrollr.init({
     forceHeight: false,
     mobileCheck: function(){
          if((/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
               // mobile device
          }
     }
});

See the Pen skroll | mobile device scroll by seobin (@lullu-lalla) on CodePen.