iScroll이란 무엇입니까? iScroll 사용 예에 대한 자세한 설명-JS 튜토리얼-php.cn

iScroll이란 무엇입니까? iScroll 사용 예에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-07-19 15:38:37

원래의

4189명이 탐색했습니다.

iScroll이 생성되었습니다:

iScroll은 전적으로 iPhone 및 Android 모바일 장치와 같은 모바일 웹킷 브라우저 때문에 생성되었습니다.
iScroll 사용 방법:

iScroll의 원리는 외부 레이어에 오버플로 숨겨진(overflow:hidden;) DOM이 있고 이 영역의 첫 번째 DOM 구조가 인스턴스화되고 래핑된 콘텐츠가 될 수 있다는 것입니다. 수직 또는 수평 스크롤이므로 iScroll을 사용할 때 스크롤 요소는 가능한 한 단순해야 하며 DOM 수를 줄이고 중첩을 줄여야 합니다. DOM 구조가 복잡할수록 iScroll을 실행하기가 더 어려워지기 때문입니다. 이로 인해 일부 노드가 비정상적으로 표시될 수 있습니다. 따라서 권장되는 DOM 구조는 다음과 같습니다.

<p id="wrapper">//overflow:hidden;
 <ul>
 //只有第一个DOM结构（ul）被实例化，这个DOM可以纵向或者横向的滚动，
 //多出的内容会被wrapper的样式hidden。
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</p>

로그인 후 복사

참고: 다시 한번 강조하지만 래퍼의 첫 번째 하위 요소(ul)만 인스턴스화하고 스크롤할 수 있으며 외부 DOM(래퍼)과 결합해야 합니다. 스크롤을 구현합니다.
래퍼에 UL이 여러 개 있으면 어떻게 되나요? 매우 간단합니다. 래퍼의 첫 번째 하위 요소(ul)만 인스턴스화되고 스크롤될 수 있다는 점을 기억하세요.

<p id="wrapper">//overflow:hidden;
 <p id="first">
  //只有第一个DOM结构(ul)被实例化，这个DOM可以纵向或者横向的滚动，
  //多出的内容会被wrapper的样式hidden
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
  </ul>
  <ul>
   <li>4</li>
   <li>5</li>
   <li>6</li>
  </ul>
 </p>
</p>

로그인 후 복사

보세요, 첫 번째 요소만 인스턴스화됩니다. 참고: 여기에는 첫 번째 DOM 구조의 ID를 작성할 필요가 없습니다. 모든 사람의 식별을 용이하게 하기 위해 ID를 작성했지만 JS를 인스턴스화할 때 필요하기 때문에 가장 바깥쪽 ID(래퍼)를 작성해야 합니다. 다음 ID를 입력하세요:

var myScroll = new iScroll("wrapper");

로그인 후 복사

iScroll을 어떻게 인스턴스화해야 하나요?:

인스턴스화에 관해 이야기했으니 언제 인스턴스화해야 할까요? 인스턴스화 방법은 여러 가지가 있다고 하는데 저는 한 번도 사용해 본 적이 없습니다.
(1) HTML 하단에 현재 페이지의 iscroll.js와 uw3c.js를 로드합니다(uw3c.html). ) 페이지(본문 뒤, html 앞) , 이를 통해 HTML DOM 구조를 로드할 수 있습니다.
(2) JS가 페이지 DOM 구조 및 데이터를 삽입하기 전에 iScroll을 인스턴스화합니다. 즉, JS가 나중에 DOM 또는 데이터를 삽입하는 데 사용될 수 있으므로 JS의 맨 처음에 인스턴스화합니다. 이렇게 하면 데이터를 삽입하기 전에 iScroll이 인스턴스화됩니다. . 이 되다.

HTML://HTML 구조

<html >
 <body>
  ...code...
 </body>
  //插入iscroll.js文件
 <script type="text/javascript" src="js/iscroll.js" > </script >
 //插入本页面JS文件
 <script type="text/javascript" src="js/uw3c.js" > </script >
</html>

로그인 후 복사

JS://JS 파일 콘텐츠

var myscroll;
 function iscroll(data){
  //实例化iScroll
  myscroll=new iScroll("wrapper");
  pageData(data);
 }
 function pageData(obj){
  $("body").html(obj);
  myscroll.refresh();//当DOM结构发生变化的时候，需要刷新iScroll
 }
 iscroll("<p>pagedata</p>");

로그인 후 복사

iScroll의 매개변수:

iScroll을 인스턴스화할 때 두 개의 매개변수를 전달할 수 있습니다. 첫 번째 매개변수는 다음과 같습니다. 인스턴스화된 외부 DOM의 ID이고 두 번째 매개변수는 iScroll 실행 메소드의 객체입니다:

var myscroll=new iScroll("wrapper",{hScrollbar:false});
或者
var opts = {
    vScroll:false,//禁止垂直滚动
    snap:true,//执行传送带效果
    hScrollbar:false//隐藏水平方向上的滚动条
   };
var myscroll = new iScroll("wrapper",opts);

로그인 후 복사

두 번째 매개변수의 내용은 iScroll의 효과를 제어합니다:

hScroll  false 禁止横向滚动 true横向滚动 默认为true
vScroll  false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar  false隐藏水平方向上的滚动条
vScrollbar  false 隐藏垂直方向上的滚动条
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce   启用或禁用边界的反弹，默认为true
momentum  启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定，true拖动只能在一个方向上（up/down 或者left/right）

로그인 후 복사

iScroll의 메소드:

물론, 두 번째 매개변수에는 실행될 수 있는 몇 가지 메소드도 있습니다:
(1)scrollTo(x, y, time, 상대) 메소드: 4개의 매개변수 전달: X축 스크롤 거리, Y축 스크롤 거리, 효과 시간, 현재 위치 기준 여부. 예를 들면 다음과 같습니다.

//在200毫秒的时间内，Y轴向上滚动100像素；
uw3c.scrollTo(0, -100, 200)
//在200毫秒的时间内，相对于当前位置，X轴向左滚动100像素；
uw3c.scrollTo(-100, 0, 200, true)

로그인 후 복사

(2)refresh() 메서드: DOM 구조가 변경된 후 iScroll을 새로 고쳐야 합니다. 그렇지 않으면 스크롤 플러그인이 부정확하게 인스턴스화됩니다.

uw3c.refresh();//刷新iScroll

로그인 후 복사

( 3)onPosChange, 위치 변경을 반환할 수 있는 메서드가 있나요? 사용 중인 iScroll에 onPosChange 메소드가 있는지 확인할 수 있습니다.

onPosChange:function(x,y){
 if(y < -200){
  //如果Y周向上滚动200像素，$("#uw3c")就显示，否则就隐藏。
  $("#uw3c").show();
 }else{
  $("#uw3c").hide();
 }
}

로그인 후 복사

(4) onScrollEnd: 스크롤이 끝날 때 이벤트가 실행되도록 하려면 이 메소드를 사용하세요.

//滚动结束后，执行的方法，滚动后会出现提示框alert("phpcn")
onScrollEnd:function(){
 alert("phpcn");
}

로그인 후 복사

(5) onRefresh: DOM 구조가 변경된 후 iScroll을 새로 고쳐야 합니다. 그렇지 않으면 스크롤 플러그인이 부정확하게 인스턴스화됩니다. onRefresh는 iScroll이 새로 고쳐진 후에 실행되는 방법입니다. .
(6)onBeforeScrollStart: 스크롤을 시작하기 전의 시간 콜백은 브라우저의 기본 동작을 방지하는 것입니다.
(7) onScrollStart: 스크롤을 시작하는 콜백입니다.
(8)onBeforeScrollMove: 콘텐츠가 이동하기 전 콜백입니다.
(9) onScrollMove: 콘텐츠 이동을 위한 콜백입니다.
(10)onBeforeScrollEnd: 스크롤이 끝나기 전 콜백합니다.
(11) onTouchEnd: 손이 화면을 떠난 후 콜백합니다.
(12) onDestroy: 인스턴스를 파괴하기 위한 콜백입니다.

위 내용은 iScroll이란 무엇입니까? iScroll 사용 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!