요약
Iscroll 4 의이 버전은 iscroll 프레임 워크의 원래 코드를 완전히 다시 작성합니다. 이 프로젝트는 모바일 웹 키트 브라우저 (예 : iPhone, iPad, Android)의 광범위한 사용으로 인해 전적으로 만들어졌습니다.
높이와 너비를 정의하는 요소의 내용을 슬라이드하는 현지화 된 방법이 제공됩니다. 불행히도이 경우 모든 웹 응용 프로그램 페이지에는 헤더, 페이지 끝 또는 위치가있는 스크롤 가능한 컨텐츠를 포함 할 수 없습니다.
중간 지역.
그러나 Android 시스템의 최신 개정은 이미이 기능을 지원할 수 있으며 (지원은 특히 좋지는 않지만) Apple은 1 핑거 슬라이드 이벤트를 DIV 요소에 적용하는 것을 꺼려하는 것 같습니다.
iScroll 4는 이전 버전의 iscroll의 기능 외에도 다음과 같은 기능을 포함합니다.
(1) 줌 (핀치/줌)
(2) 위로/아래로 당겨 새로 고쳐집니다
(3) 속도 및 성능 향상
(4) 요소를 정확하게 캡처합니다
(5) 맞춤형 스크롤 바
친절한 팁 : Iscroll 4는 Iscroll 3에 대한 간단한 대안이 아니며 API 문서는 이미 다릅니다. 또한이 버전이 베타 버전에 있다는 것을 고려하면 일부 API는 약간의 변경 사항이있을 수 있습니다.
사용자 안내서
이 문서에서는 iscroll 스크립트 라이브러리를 신속하게 시작하는 방법을 알려주는 많은 예를 찾을 수 있습니다. 기사의 데모 예제를 참조 하고이 문서를주의 깊게 읽는 것은 약간 지루할 수 있지만,이 기사는 스크립트 라이브러리 Iscroll의 본질입니다.
iScroll은 스크롤 할 요소를 초기화해야하며 페이지에서 iscroll을 사용하는 요소 수를 제한하지 않습니다 (하드웨어 구성은 여기에서 고려되지 않음). 스크롤 요소의 컨텐츠 유형과 길이는 IsCroll 스크립트 라이브러리에 어느 정도 영향을 미칩니다.
동시에 사용할 수있는 요소의 수.
iscroll 스크립트 라이브러리를 사용할 때 DOM 트리의 구조는 불필요한 태그를 제거하고 태그의 과도한 둥지를 피할 수있을 정도로 간단해야합니다.
iscroll을 사용하는 최적의 구조는 다음과 같습니다.
<div id = "래퍼"> <ul> <li> </li> ...... </ul> </div>
이 작은 예에서는 UL 태그가 스크롤됩니다. ISCroll은 스크롤 컨텐츠 외부의 래퍼에 연결되어 결과를 생성해야합니다.
【지침】:
래퍼의 첫 번째 자식 요소 만 스크롤 할 수 있습니다. 더 많은 요소가 스크롤하기를 원한다면 다음과 같은 글쓰기 방법을 시도 할 수 있습니다.
<div id = "래퍼"> <div id = "스크롤러"> <ul> <li> </li> ... </ul> <ul> <li> </li> ... </ul> </div> </div>
이 예에서는 두 개의 UL 요소가 포함되어 있어도 스크롤러 요소를 스크롤 할 수 있습니다.
iscroll은 전화하기 전에 인스턴스화해야합니다. 다음과 같은 경우 iscroll을 인스턴스화 할 수 있습니다.
(1) ondomContentLoaded 이벤트를 사용하여 스크롤을 달성하십시오
컨텐츠를 스크롤하는 데 적합한 텍스트와 사진 만 포함되며 모든 사진에는 고정 크기가 있습니다.
<script src = "iscroll.js"> </script> <cript> var myscroll; 함수로드 () {myscroll = new iscroll ( "Wapper"); } window.adeventListener ( "domContentLoaded",로드, false); </스크립트>참고 : MyScroll 변수는 전역이므로 어디서나 호출 할 수 있습니다.
(2) Onload 이벤트를 사용하여 스크롤을 달성하십시오
DOM 구조를로드 한 후 DOMContentLoaded 이벤트가 호출되므로 이미지와 같은 요소가로드되지 않기 전에 스크롤 영역의 길이와 폭을 결정하지 않을 수 있습니다. 현재 OnLoad 이벤트를 구현할 수 있습니다.
<script src = "iscroll.js"> <cript> <cript> var myscroll; 함수 loaded () {settimeout (function () {myscroll = new iscroll ( "랩퍼");}, 100); } window.adeventListener ( "로드",로드, False); </스크립트>이 경우, 페이지 리소스 (그림 포함)가 100ms로로드 된 후 iScroll이 초기화됩니다. 이것은 iscroll을 부르는 비교적 안전한 방법이어야합니다.
(3) 인라인의 초기화
이 상황은 페이지가 JS로로드되면 호출됩니다. 이 방법은 권장되지 않지만 많은 JavaScript Bigwig 가이 방법을 사용하고 있습니다. 동의하지 않아야하는 이유는 무엇입니까?
<script src = "iscroll.js"> </script> <div id = "래퍼"> <ul> <li> </li> ... </ul> </div> <cript> var myscroll = new iscroll ( "Whapper"); </스크립트>
그러나 일부 프레임 워크 ready 메소드를 사용하여 iscroll (예 : ready () jQuery)을 안전하게 호출하는 것이 좋습니다.
iscroll에서 매개 변수가 전달되었습니다
iscroll의 두 번째 매개 변수를 사용하면 다음 코드와 같은 일부 컨텐츠를 사용자 정의 할 수 있습니다.
<cript> var myscroll = new iscroll ( "래퍼", {hscrollbar : false, vscrollbar : false}); </script>두 번째 매개 변수는 일반적으로 객체입니다. 예를 들어, 위의 예에는 스크롤 막대가 표시되지 않습니다. 일반적으로 사용되는 매개 변수는 다음과 같습니다.
hscroll false는 수평 스크롤링 진정한 수평 스크롤 기본값을 true로 금지합니다.
vscroll false 정제 된 수직 스크롤 true vertical scroll default to true
hscrollbar false는 수평 방향으로 두루마리를 숨 깁니다
VSCROLLBAR FALSE SCROLLBAR 수직 방향으로 숨어 있습니다
iOS 시스템의 고정 스크롤 바, 요소 드래그가 스크롤러의 경계를 초과하면 스크롤 바가 줄어 듭니다. 스크롤 바가 스크롤러를 초과하는 것을 방지하기 위해 TRUE로 설정하십시오.
스크롤러의 가시 영역. 기본값은 Android에서는 사실이며 iOS에서는 거짓입니다
fadescrollbar false 페이딩 효과가 없을 때 스크롤 바를 숨기도록 지정합니다.
Hidesscrollbar는 사용자 상호 작용 기본값이 없을 때 스크롤 바를 숨기고 있습니다.
바운스 경계 바운스 활성화 또는 비활성화, 기본값으로 바운스
모멘텀은 관성을 가능하게하거나 비활성화하고, 기본값을 true로,이 매개 변수는 리소스를 저장할 때 매우 유용합니다.
잠금 방향 거짓 오지 취소 드래그 방향의 잠금, 진정한 드래그는 한 방향으로 만있을 수 있습니다 (위/아래 또는 왼쪽/오른쪽)
다양한 효과의 성취
새로 고침 '새로 고침'데모를 스크롤하십시오
이 효과는 트위터와 일부 애플 로컬 앱이 나타 났기 때문에 매우 인기가 높아졌습니다. 여기서 살펴볼 수 있습니다.
최신 버전에서 저자는 Iscroll의 추가 플러그인으로 "Pull to Croshment"부품을 분리합니다. 여기를 클릭하여 Pull to Refresh Works가 어떻게 작동하는지 확인할 수 있습니다. PullDownaction () 메소드를 사용자 정의하기 만하면됩니다. 새 컨텐츠를로드하려면 Ajax가 필요할 수 있지만 DOM 트리가 변경되면 새로 고침에 전화하십시오. 이 예에서는 네트워크의 지연 효과를 시뮬레이션하기 위해 1 초 지연을 추가했습니다. 물론이 지연을 사용하지 않으려면 설정 타임 아웃 방법을 제거하십시오.
Zoom (Pinch / Zoom) '새로 고침'데모
우리는 단지 롤링이 실제로 새로운 것이 아니라는 사실에 직면해야합니다. 이것이이 버전의 iscroll 4에서 우리는 당신이 그것을 넣을 수있는 이유입니다.
크고 수축. 이 함수를 원하시면 줌 매개 변수를 진정으로 설정하면 제스처를 사용하여 확대 및 축소하면됩니다. 여기서 살펴볼 수 있습니다.
복용 및 출력을 두 번 클릭하는 것은 Iscroll 4에서도 지원됩니다. 줌 기능을 사용하려면 다음 구성이 필요합니다.
var myscroll = new iscroll ( "래퍼", {Zoom : True});
줌 기능을 깊이로 사용자 정의하려면 다음 옵션 중 일부를 사용할 수 있습니다.
zoommax는 배율을 허용하는 최대 배수를 지정하고 기본값은 4입니다.
[참고] : 이미지 스케일링이 효과적이 되려면 하드웨어 합성 레이어에 넣어야합니다. Layman의 용어로는 확장 해야하는 모든 IMG 요소에 -webkit transform : translate3d (0,0,0)를 사용하는 것입니다. 또한 하드웨어 가속이 많은 리소스를 차지하고주의해서 사용해야하는 것이 특히 중요합니다. 그렇지 않으면 응용 프로그램이 중단 될 수 있습니다.
요소 '회전 목마'데모에 스냅하고 스냅하십시오
스냅 함수는 요소가 지정된 위치로 미끄러지는지 여부를 결정하는 것입니다. 이 효과를 통해 멋진 천막 효과를 만들 수 있습니다.
플러그인은 캡처 객체와 스크롤 영역에서 동일한 레이블 또는 동일한 크기의 요소를 자동으로 분석하며 매개 변수를 통해 캡처 된 객체를 지정할 수도 있습니다.
var myscroll = new iscroll ( "래퍼", {snap : true, momentum : false, hscrollbar : false, vscrollbar : false});스냅 매개 변수를 지정된 태그로 설정하여 스냅 객체를 설정할 수 있습니다. 예를 들어 Li 태그를 캡처하십시오.
var myscroll = new iscroll ( "래퍼", {snap : "li", momentum : false, hscrollbar : false, vscrollbar : false});이 예에서 스크롤러는 스크롤 영역에서 왼쪽 상단에서 가장 큰 LI 요소를 캡처 할 수 있습니다.
맞춤형 스크롤 바
Iscroll 4에서는 일련의 CSS를 사용하여 스크롤 바의 렌더링을 사용자 정의 할 수 있습니다. 다음과 같이 스크롤 막대에 클래스 매개 변수를 추가 할 수 있습니다.
var myscroll = new iscroll ( "래퍼", {scrollbarclass : "myscrollbar"});스크롤 막대는 컨테이너와 디스플레이의 두 가지 요소로 구성되어 있습니다. 컨테이너는 래퍼와 같은 높이이며 디스플레이는 스크롤바 자체를 나타냅니다.
스크롤 막대의 HTML 구조는 다음과 같습니다.
<div> <div> </div> </div> .myscrollbarv {위치 : 절대; z-index : 100; 너비 : 8px; 하단 : 7px; 상단 : 2px; 오른쪽 : 1px; } .myscrollbarv> div {위치 : 절대; z-index : 100; 너비 : 100%; / * 다음은 아마도 당신이 사용자 정의하고자하는 것일 것입니다 */배경 : -webkit-gradient (선형, 0 0, 100% 0, (#f00), (#900)까지 (#900)); 테두리 : 1px solid#800; -webkit-background-clip : padding-box; -webkit-box-sizing : border-box : 4px-shitbobobobodobodobodobodobober : 4px-shitbob-sbit-shit-soblobod. 1px 1px 0 RGBA (255,255,255,0.5); }일반 방법 :
(1) Dom Tree가 변경 될 때이 방법을 호출해야합니다.
예 : settimeout (function () {myscroll.refresh ();}, 0);
(2) Iscroll은 또한 Scrollto, Scrolltoelement 및 ScrollTopage의 세 가지 방법을 제공하여 JavaScript를 통해 스크롤 효과를 제어 할 수 있습니다.
scrollto (x, y, time, intervative) : 지정된 시간 내에 컨텐츠 스크롤 바 x/y 위치를 입력하십시오. 예를 들어, myscroll.scrollto (0, -100, 200)는 200 밀리 초의 100 픽셀로 아래로 스크롤합니다. myscroll.scrollto (0, 10, 200, true)는 현재 위치에 비해 200 밀리 초 이내에 Y 축에 10 픽셀을 스크롤하는 효과를 달성 할 수 있습니다.
scrolltoelement (요소, 시간) : 지정된 시간 내에 지정된 요소로 스크롤하십시오. 예를 들어, myscroll.scrolltoelement ( 'li : nth-Child (10)', 100)는 100 밀리 초 이내에 10 번째 Li 요소의 위치로 스크롤됩니다. 첫 번째 파라미터는 CSS3의 선택기와 요소를 필터링하는 데 사용될 수 있습니다.
SNAPTOPAGE (Pagex, Pagey, Time) : 200 밀리 초의 1 페이지에서 2 페이지로 스크롤합니다 (0은 페이지 1, 1을 나타냅니다). 스냅 함수를 사용할 때는이 기능을 호출 할 수 있습니다.
(3) Detroy ()는 MyScroll과 그 메모리 공간을 완전히 제거합니다.
예 : myscroll.destroy ();
myscroll = null;
iscroll의 개발 방향
양식 도메인 지원
스케일링 최적화
더 나은 데스크탑 브라우저 호환성
온 스크롤 이벤트의 최적화
해시 값 추가 변경
DOM 변경 후 자동 새로 고침