공식 웹 사이트 : http://iscrolljs.com/
iscroll의 가장 간단한 DOM 구조 :
<div id = "래퍼"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
iScroll을 초기화하십시오
var myscroll = new iscroll ( '#래퍼', 옵션);
설정 초기화
설정 초기화 사용 예 :
var myscroll = new iscroll ( '#wrapper', {mousewheel : true, scrollbars : true});설정 목록 :
속한다 | 속성 이름 | 설명 | 기본값 |
|---|---|---|---|
핵심 라이브러리 크로 | Options.usetransform | CSS3의 변환 속성 사용 여부 | 진실 |
옵션. 중수화 | CSS3의 전환 속성을 사용할지 여부는 대신 requestAnimationFram을 사용하십시오. | 진실 | |
옵션 .hwcompositing | 하드웨어 가속을 활성화할지 여부 | 진실 | |
옵션 | 탄성 애니메이션 효과를 활성화할지 여부, 속도를 높이기 위해 끄기 | 진실 | |
기본 기능 기본 기능 | 옵션을 클릭하십시오 | 클릭 이벤트 활성화 여부. 이 옵션을 끄고 사용자 정의 탭 이벤트 (옵션)를 활성화하는 것이 좋습니다. | 거짓 |
옵션 .disablemouse | 마우스 이벤트 감지 여부. 어떤 플랫폼을 실행 해야하는지 알고 있다면 가속화 할 수 있습니다. | 거짓 | |
옵션 .disablepointer | 포인터 이벤트 감지 여부. 어떤 플랫폼을 실행 해야하는지 알고 있다면 가속화 할 수 있습니다. | 거짓 | |
옵션 .disabletouch | 터치 이벤트 감지를 끄는지 여부. 어떤 플랫폼을 실행 해야하는지 알고 있다면 가속화 할 수 있습니다. | 거짓 | |
옵션 .EventPassthrough | Iscroll의 수평 축을 사용하여 롤을 사용하는 경우, 시스템 세로 축을 사용하여 수평 축에 롤링하고 적용하려면 켜십시오. 이벤트 패스 스루 데모 | 거짓 | |
옵션 .freescroll | 주로 위, 아래, 왼쪽 및 오른쪽 스크롤이 발효 될 때 사용되며 어떤 방향 으로든 스크롤 할 수 있습니다. 2D 스크롤 데모 | 거짓 | |
옵션. Keybindings | 키 이벤트 바인드. 주요 바인딩 | 거짓 | |
옵션 | 리버스 마우스 휠. | 거짓 | |
옵션 .momentum | 시작 애니메이션을 켜고 효율성을 높이려면 끄십시오. | 진실 | |
옵션 .mousewheel | 마우스 휠 이벤트를 듣는 지 여부. | 거짓 | |
옵션 .preventDefault | 기본 이벤트를 차단할지 여부. | 진실 | |
옵션 .Scrollbars | 기본 스크롤 바를 표시할지 여부 | 거짓 | |
옵션 .scrollx 옵션 | 가로 또는 수직 스크롤 막대를 표시할지 여부를 설정할 수 있습니다. | Scrollx false 스크롤리 진실 | |
옵션 | 사용자 정의 탭 이벤트 활성화 여부 탭 이벤트 이름을 사용자 정의 할 수 있습니다 | 거짓 | |
스크롤 바 스크롤 바 | 옵션 .Scrollbars | 기본 스크롤 바를 표시할지 여부 | 거짓 |
옵션 .fadescrollbars | 스크롤 바를 페이드할지 여부를 끄고 속도를 높이십시오. | 진실 | |
옵션 interactivescrollbars | 사용자가 스크롤 바를 드래그 할 수 있습니다 | 거짓 | |
옵션 resizescrollbars | 스크롤 막대 크기를 수정할지 여부는 스크롤 막대를 사용자 정의 할 때 활성화하는 것이 좋습니다. | 거짓 | |
옵션 .shrinkscrollbars | 스크롤 할 때 스크롤 막대를 수축할지 스크롤 경계를 초과할지 여부. '클립': 스크롤바를 너머로 자르십시오 '스케일': 비율의 스크롤 바 스케일링 (CPU 리소스 점유) 거짓 : 수축이없고 | 거짓 | |
옵션. 표시기 | 스크롤 바의 기본 구현 인 iscroll을 스크롤 해야하는 방법을 지시합니다. | ||
옵션. 표시기 .EL | 스크롤 막대 용 컨테이너를 만듭니다. 컨테이너의 첫 번째 요소는 표시기입니다. 예를 들어: 지표 : { el : document.getElementById ( 'indicator') } 지표 : { el : '#Indicator' } | ||
옵션. 표시기 | 컨테이너 경계를 무시할지 여부. 스크롤 속도를 설정하려면 true로 설정하십시오 Parallelax 데모 | 거짓 | |
Options.Indicators.listenx Options.Indicators.listeny | 표시기는 해당 방향의 스크롤을 모니터링하여 한 방향 또는 두 방향으로 설정할 수 있습니다. | 진실 | |
옵션. 표시기 .speedratiox 옵션. 표시기 .speedratioy | 주 스크롤 막대에 대한 지표 속도 | 0 | |
옵션. 표시기 옵션. 표시기 옵션. 표시기 Options.Indicators.shrink | 스크롤 바와 같은 설정 미니 맵 데모 | ||
옵션 .probetype | iscroll-probe.js가 효력을 발휘해야합니다 Probetype : 1 스크롤이 바쁘지 않을 때 트리거됩니다 Probetype : 2 스크롤 할 때 매번 트리거되었습니다 Probetype : 3 픽셀 당 1 회 트리거 스크롤 | ||
분할 페이지 스냅 | 옵션 .snap | 회전 랜턴의 효과를 만들기 위해 용기를 자동으로 분할하십시오. 옵션 .snap : true // 컨테이너 크기에 따라 자동으로 분할됩니다 옵션 .snap : el // 요소에 따른 세그먼트 | 거짓 |
줌 줌 | 옵션. Zoom | 줌을 켜야하는지 여부 iscroll-zoom.js를 사용하는 것이 가장 좋습니다 배율이 흐려지면 소스 컨테이너는 크기의 2 배로 정의 된 다음 스케일 (0.5) 줌 데모 | 거짓 |
옵션 .zoommax | 최대 줌 레벨 | 4 | |
옵션 .zoommin | 최소 줌 레벨 | 1 | |
옵션 .Startzoom | 초기 스케일링 레벨 | 1 | |
옵션. 휘발 | 롤러 동작 'Zoom'으로 설정하면 스크롤 휠로 확대 할 수 있습니다. | 한정되지 않은 | |
더 많은 설정 | 옵션 .bindtowrapper | 커서 또는 터치가 컨테이너를 초과 할 때 스크롤을 중지할지 여부 | 거짓 |
옵션 | 탄성 애니메이션 효과 사전 설정 효과 : '2 차', '원형', '백', '바운스', '탄성'(마지막 두 개는 CSS3를 통해 표현할 수 없습니다) 효과를 사용자 정의 할 수도 있습니다 이탈하는 : { 스타일 : 'Cubic-Bezier (0,0,1,1)', // css3 fn : 함수 (k) {return k; } // requestAnimationFrame을 사용할 때 } | '회보' | |
옵션 | 탄성 애니메이션 밀리 초의 수는 지속됩니다 | 600 | |
옵션 .celeration | 롤링 운동량 감속 더 빨리 클수록 권장 가격은 0.01 이하입니다. | 0.0006 | |
옵션 .mousewheelspeed | 마우스 휠 속도 | ||
옵션 .preventDefaultexception | 어떤 요소가 기본 이벤트를 차단하지 않는 목록; | {tagname : /^(입력 | TextArea | 버튼 | 선택) $ /} | |
옵션. ResizePolling | 창을 크기를 조정할 때 iscroll 시간 간격을 다시 계산하십시오 | 60 | |
주요 바인딩 | 옵션. Keybindings | Iscroll을 제어하기위한 주요 이벤트를 들어보십시오 예를 들어: 키 바인딩 : { Pageup : 33, Pagedown : 34, 끝 : 35, 홈 : 36, 왼쪽 : 37, UP : 38, 오른쪽 : 39, 다운 : 40 } | |
iscroll5 API :
속한다 | 메소드 이름 | 설명 |
|---|---|---|
스크롤 | scrollto (x, y, 시간, 완화) | 스크롤 : x, y, 이벤트, 완화 방법 X : int Y : int 시간 : int 완화 : 2 차 | 원형 | 뒤로 | 바운스 | 탄력 있는 iscroll.utils.ease 객체를 참조하십시오 예: myscroll.scrollto (0, -100, 1000, iscroll.utils.ease.elastic); |
Scrollby (X, Y, 시간, 완화) | 현재 위치와 관련하여 어딘가에 스크롤하십시오 나머지는 위와 동일합니다 | |
scrolltoelement (el, time, offsetx, offsety, 완화) | 요소로 스크롤하십시오. EL은 필요한 매개 변수입니다 Offsetx/Offsety : EL 요소에 대한 변위. 화면의 중심이되도록 true로 설정 요소로 스크롤하십시오 | |
분할 페이지 스냅 | gotopage (x, y, 시간, 완화) | 옵션에 따라 페이지를 나누고 조경이나 초상화의 페이지로 점프하십시오. XY는 동시에 효력을 발휘할 수 있습니다. 옵션과 함께 사용하십시오 .snap |
다음() 이전 () | 이전 페이지, 다음 페이지 옵션과 함께 사용하십시오 .snap | |
줌 | 줌 (스케일, X, Y, 시간) | 스케일링 컨테이너 스케일 : 스케일링 계수 |
새로 고치다 | 새로 고치다() | iscroll을 새로 고치십시오 |
파괴하다 | 파괴하다() | iscroll을 파괴하고 자원을 저장하십시오 |
iscroll 이벤트 :
Beforescrollstart | 사용자는 화면을 클릭하지만 스크롤하기 전에 아직 초기화되지 않았습니다. |
|---|---|
Scrollcancel | 스크롤을 초기화 한 후 취소 |
스크롤 스타트 | 스크롤을 시작하십시오 |
스크롤 | 스크롤 |
두개 건 | 스크롤이 끝납니다 |
영화 | 왼쪽 및 오른쪽 화면을 누릅니다 |
Zoomstart | 스케일링을 시작하십시오 |
Zoomend | 줌의 끝 |
이벤트 사용 예 :
myscroll = new iscroll ( '#래퍼'); myscroll.on ( 'scrollend', dosomething);
iscroll의 속성 :
myscroll.x/y | 현재 위치 |
|---|---|
myscroll.directionx/y | 마지막 시간의 스크롤 방향 (-1 다운/오른쪽, 0은 원본, 1 위/왼쪽을 유지합니다) |
myscroll.currentpage | 현재 스냅 정보 |
myscroll.maxscrollxmyscroll.maxscrolly | 바닥으로 스크롤 할 때 myscroll.x/y |