iScroll이 생성되었습니다:
iScroll은 전적으로 iPhone 및 Android 모바일 장치와 같은 모바일 웹킷 브라우저 때문에 생성되었습니다.
iScroll 사용 방법:
iScroll의 원리는 외부 레이어에 오버플로 숨겨진(overflow:hidden;) DOM이 있고 이 영역의 첫 번째 DOM 구조가 인스턴스화되고 래핑된 콘텐츠가 될 수 있다는 것입니다. 수직 또는 수평 스크롤이므로 iScroll을 사용할 때 스크롤 요소는 가능한 한 단순해야 하며 DOM 수를 줄이고 중첩을 줄여야 합니다. DOM 구조가 복잡할수록 iScroll을 실행하기가 더 어려워지기 때문입니다. 이로 인해 일부 노드가 비정상적으로 표시될 수 있습니다. 따라서 권장되는 DOM 구조는 다음과 같습니다.
1 2 3 4 5 6 7 8 9 |
|
참고: 다시 한번 강조하지만 래퍼의 첫 번째 하위 요소(ul)만 인스턴스화하고 스크롤할 수 있으며 외부 DOM(래퍼)과 결합해야 합니다. 스크롤을 구현합니다.
래퍼에 UL이 여러 개 있으면 어떻게 되나요? 매우 간단합니다. 래퍼의 첫 번째 하위 요소(ul)만 인스턴스화되고 스크롤될 수 있다는 점을 기억하세요.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
보세요, 첫 번째 요소만 인스턴스화됩니다. 참고: 여기에는 첫 번째 DOM 구조의 ID를 작성할 필요가 없습니다. 모든 사람의 식별을 용이하게 하기 위해 ID를 작성했지만 JS를 인스턴스화할 때 필요하기 때문에 가장 바깥쪽 ID(래퍼)를 작성해야 합니다. 다음 ID를 입력하세요:
1 |
|
iScroll을 어떻게 인스턴스화해야 하나요?:
인스턴스화에 관해 이야기했으니 언제 인스턴스화해야 할까요? 인스턴스화 방법은 여러 가지가 있다고 하는데 저는 한 번도 사용해 본 적이 없습니다.
(1) HTML 하단에 현재 페이지의 iscroll.js와 uw3c.js를 로드합니다(uw3c.html). ) 페이지(본문 뒤, html 앞) , 이를 통해 HTML DOM 구조를 로드할 수 있습니다.
(2) JS가 페이지 DOM 구조 및 데이터를 삽입하기 전에 iScroll을 인스턴스화합니다. 즉, JS가 나중에 DOM 또는 데이터를 삽입하는 데 사용될 수 있으므로 JS의 맨 처음에 인스턴스화합니다. 이렇게 하면 데이터를 삽입하기 전에 iScroll이 인스턴스화됩니다. . 이 되다.
HTML://HTML 구조
1 2 3 4 5 6 7 8 9 |
|
JS://JS 파일 콘텐츠
1 2 3 4 5 6 7 8 9 10 11 |
|
iScroll의 매개변수:
iScroll을 인스턴스화할 때 두 개의 매개변수를 전달할 수 있습니다. 첫 번째 매개변수는 다음과 같습니다. 인스턴스화된 외부 DOM의 ID이고 두 번째 매개변수는 iScroll 실행 메소드의 객체입니다:
1 2 3 4 5 6 7 8 |
|
두 번째 매개변수의 내용은 iScroll의 효과를 제어합니다:
1 2 3 4 5 6 7 8 9 |
|
iScroll의 메소드:
물론, 두 번째 매개변수에는 실행될 수 있는 몇 가지 메소드도 있습니다:
(1)scrollTo(x, y, time, 상대) 메소드: 4개의 매개변수 전달: X축 스크롤 거리, Y축 스크롤 거리, 효과 시간, 현재 위치 기준 여부. 예를 들면 다음과 같습니다.
1 2 3 4 |
|
(2)refresh() 메서드: DOM 구조가 변경된 후 iScroll을 새로 고쳐야 합니다. 그렇지 않으면 스크롤 플러그인이 부정확하게 인스턴스화됩니다.
1 |
|
( 3)onPosChange, 위치 변경을 반환할 수 있는 메서드가 있나요? 사용 중인 iScroll에 onPosChange 메소드가 있는지 확인할 수 있습니다.
1 2 3 4 5 6 7 8 |
|
(4) onScrollEnd: 스크롤이 끝날 때 이벤트가 실행되도록 하려면 이 메소드를 사용하세요.
1 2 3 4 |
|
(5) onRefresh: DOM 구조가 변경된 후 iScroll을 새로 고쳐야 합니다. 그렇지 않으면 스크롤 플러그인이 부정확하게 인스턴스화됩니다. onRefresh는 iScroll이 새로 고쳐진 후에 실행되는 방법입니다. .
(6)onBeforeScrollStart: 스크롤을 시작하기 전의 시간 콜백은 브라우저의 기본 동작을 방지하는 것입니다.
(7) onScrollStart: 스크롤을 시작하는 콜백입니다.
(8)onBeforeScrollMove: 콘텐츠가 이동하기 전 콜백입니다.
(9) onScrollMove: 콘텐츠 이동을 위한 콜백입니다.
(10)onBeforeScrollEnd: 스크롤이 끝나기 전 콜백합니다.
(11) onTouchEnd: 손이 화면을 떠난 후 콜백합니다.
(12) onDestroy: 인스턴스를 파괴하기 위한 콜백입니다.
위 내용은 iScroll이란 무엇입니까? iScroll 사용 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!