iScroll을 사용하여 콘텐츠 스크롤을 구현하는 단계에 대한 자세한 설명(코드 포함)

이번에는 iScroll(코드 포함)을 사용하여 콘텐츠 스크롤을 구현하는 단계에 대해 자세히 설명하겠습니다. iScroll에서 콘텐츠 스크롤을 구현하기 위한 주의사항은 무엇인가요?

1. iScroll 소개

iScroll은 기본 IOS 애플리케이션에서 스크롤 목록 작업을 시뮬레이션할 수 있으며 크기 조정, 당겨서 새로 고침, 정확한 요소 캡처 및 사용자 정의를 수행할 수도 있습니다. 스크롤바 및 기타 기능. 여기 블로거가 사용하는 버전은 iScroll4.25입니다. 최신 버전은 공식 웹사이트에서 다운로드할 수 있습니다.
공식 홈페이지 주소 : http://iscrolljs.com/

2. iScroll 사용법

1.iScroll 사용 구조

일반적으로 iScroll을 사용하기 위한 최적의 구조는 다음과 같습니다.

HTML :

<p>
  </p><p>
   </p>

    
•     ...    

   

    
•     ...    

    

참고: 1. iScroll이 효과를 가지려면 스크롤 내용 외부의 래퍼에 접촉해야 합니다.
2. 래퍼의 첫 번째 하위 요소만 스크롤할 수 있습니다.

2. iScroll 인스턴스화

iScroll은 호출하기 전에 인스턴스화해야 합니다. 인스턴스화 코드는 다음과 같습니다(head 태그에 다음 코드 추가).

<script></script>
 <script>
  var myscroll;//myscroll是全局变量，可以任意地方调用
  function loaded(){
   myscroll = new iScroll("wrapper");
   }
  window.addEventListener("DOMContentLoaded",loaded,false);
 </script>

3. 롤링 테스트 예시

HTML+ CSS :

<meta>
<meta>
<meta>
<meta>
<script></script><!--引入js包-->
<!--实例化iScroll-->
<script>
 var myscroll;
 function loaded(){
 myscroll = new iScroll("wrapper");
 }
 window.addEventListener("DOMContentLoaded",loaded,false);
</script>
<!--CSS样式设置-->
#wrapper {
 position:absolute; z-index:1;
 top:45px; bottom:48px; left:0;
 width:100%;
 background:#aaa;
 overflow:auto;
}
#scroller {
 position:relative;
/* -webkit-touch-callout:none;*/
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 float:left;
 width:100%;
 padding:0;
}
#scroller ul {
 position:relative;
 list-style:none;
 padding:0;
 margin:0;
 width:100%;
 text-align:left;
}
#scroller li {
 padding:0 10px;
 height:40px;
 line-height:40px;
 border-bottom:1px solid #ccc;
 border-top:1px solid #fff;
 background-color:#fafafa;
 font-size:14px;
}
#scroller li > a {
 display:block;
}

<title>滚动测试</title>


<p>
 </p><p>
  </p>

   
• Pretty row 1
   
• Pretty row 2
   
• Pretty row 3
   
• Pretty row 4
   
• Pretty row 5
   
• Pretty row 6
   
• Pretty row 7
   
• Pretty row 8
   
• Pretty row 9
   
• Pretty row 10
   
• Pretty row 11
   
• Pretty row 12
   
• Pretty row 13
   
• Pretty row 14
   
• Pretty row 15
   
• Pretty row 16
   
• Pretty row 17
   
• Pretty row 18
  

 

4. 실행 효과

블로거는 이제 막 학습을 시작했습니다. 부분 콘텐츠 스크롤은 iScroll의 가장 기본적인 기능일 뿐입니다. 다음으로 블로거는 새로 고침 및 기타 기능을 가져오려고 합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Bootstrap에서 WebUploader를 사용하는 단계에 대한 자세한 설명

js 생년월일 정규식 확인

위 내용은 iScroll을 사용하여 콘텐츠 스크롤을 구현하는 단계에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!