jQuery는 모방 Mac Lion OS 스크롤 막대를 생성합니다.-JS 튜토리얼-php.cn

nanoScrollerJS는 간단한 방법을 사용하여 Mac OS X Lion 시스템의 스크롤 막대 효과를 구현하는 jQuery 플러그인입니다. 이 스크롤바 플러그인은 최소한의 HTML 구조인 .nano > 다른 스크롤 막대 요소인 .pane > .nano-slider는 플러그인이 실행될 때 동적으로 로드됩니다. 이 스크롤바 플러그인은 기본 스크롤바를 사용하여 iPad, iPhone 및 일부 Android 태블릿에서 작동합니다.

사용방법

HTML 구조

다음은 스크롤 막대 플러그인이 작동하는 데 필요한 HTML 구조입니다.

코드 복사 코드는 다음과 같습니다.

... 콘텐츠는 여기에 있습니다 ...

nano 및 nano 콘텐츠의 클래스 이름은 플러그인 매개변수를 통해 변경할 수 있습니다. (변경 후에는 플러그인의 CSS 파일도 이에 맞게 변경되어야 합니다.)

CSS 스타일

nanoscroller.css 파일을 HTML

에 삽입합니다.

코드 복사 코드는 다음과 같습니다.

컨테이너의 너비와 높이를 지정하고 스크롤 막대의 몇 가지 기본 스타일을 맞춤설정해야 합니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

.nano { 배경: #bba; 높이: 500px }

.nano > .nano-content { 패딩: 10px }

.nano > .nano-pane { 배경: #888 }

.nano > .nano-pane > .nano-slider { 배경: #111 }

자바스크립트

jquery.nanoscroller.js 파일을 페이지에 도입하세요.

코드 복사 코드는 다음과 같습니다.

그런 다음 다음 방법을 사용하여 스크롤 막대 플러그인을 호출합니다. 이 방법은 HTML에서 .nano가 있는 모든 DOM 요소에 적용됩니다.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller();

고급 방법

맨 위로 스크롤:

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ 스크롤: 'top' });

아래로 스크롤:

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ 스크롤: 'bottom' });

오프셋을 사용하여 위로 스크롤:

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ scrollTop: value });

오프셋 값을 사용하여 아래쪽으로 스크롤:

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ scrollBottom: value });

요소 스크롤:

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ scrollTo: $('#a_node') });

스크롤을 중지하세요. 이 옵션은 스크롤바 플러그인의 모든 바인딩된 이벤트를 무효화하고 UI에서 스크롤바를 숨깁니다.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ stop: true });

파괴

nanoScroller 스크롤 막대를 삭제하고 스크롤 막대를 브라우저의 기본 스크롤 막대로 재설정합니다.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ destroy: true });

스크롤바를 깜박이도록 설정합니다. 깜박이는 시간은 매개변수에 따라 설정됩니다(기본값 1.5초).

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ flash: true });

나노스크롤러();

스크롤 막대를 새로 고칩니다. 이 작업은 단순히 스크롤 막대의 위치와 높이를 다시 계산합니다.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller();

맞춤 이벤트

스크롤

스크롤 막대가 컨테이너 하단으로 스크롤될 때마다 맞춤 스크롤 종료 이벤트가 트리거됩니다. (스크롤 막대가 컨테이너 하단에 도달하면 사용자가 다시 스크롤해도 이 이벤트가 트리거되지 않습니다.)

코드 복사 코드는 다음과 같습니다.

$(".nano").bind("scrollend", function(e){

console.log("현재 HTMLDivElement", e.currentTarget);

});

일부 브라우저는 이 이벤트를 동시에 여러 번 트리거하므로 이 이벤트를 바인딩하려면 jQuery .bind 또는 .on을 사용해야 합니다. jquery-debounce 플러그인을 사용하면 브라우저가 100밀리초마다 이 이벤트를 트리거하도록 할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$(".nano").debounce("scrollend", function() {

Alert("끝");

}, 100);

스크롤탑

scrollend 이벤트와 동일하며 사용자가 컨테이너 상단으로 스크롤할 때마다 트리거됩니다.

scrollend 이벤트는 scrolltop 이벤트와 동일하며 사용자가 스크롤할 때마다 실행됩니다. 이 이벤트는 스크롤 막대의 현재 위치, 최대 높이 및 방향(위 또는 아래)에 대한 js 객체 매개변수와 함께 제공됩니다.

코드 복사 코드는 다음과 같습니다.

$(".nano").on("업데이트", function(이벤트, 값){ 

console.debug(값 ​​);

});

구성 매개변수

이 스크롤 막대 플러그인에는 다음과 같은 매개변수 세트가 있습니다.

iOSNative스크롤링

iOS 5에서 기본 스크롤바를 사용하려면 true로 설정하면 됩니다. 기본 스크롤바는 iOS 5에서 더 잘 작동합니다.

iOSNativeScrolling이 true로 설정되면 기본 스크롤 막대를 지원하기 위해 기기에서 .pane 및 .slider가 생성/추가되지 않습니다.

기본값: 거짓.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ iOSNativeScrolling: true });

sliderMinHeight

스크롤 요소의 최소 높이 설정:

기본값: 20.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ SliderMinHeight: 40 })

sliderMaxHeight

스크롤 요소의 최대 높이 설정:

기본값: null.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ SliderMaxHeight: 200 });

페이지 스크롤 방지

컨테이너 콘텐츠가 위쪽이나 아래쪽으로 스크롤될 때 페이지가 스크롤되지 않도록 하려면 true로 설정하세요.

기본값: 거짓.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ PreventPageScrolling: true });

크기 조정 비활성화

나노스크롤러의 크기 변경을 방지하려면 true로 설정하세요. 이 옵션을 true로 설정하면 재설정 메소드를 호출해야 합니다. 그렇지 않으면 이상한 문제가 발생합니다.

기본값: 거짓.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ 비활성화Resize: true });

항상 표시

스크롤 막대가 멈출 때 자동 숨기기 기능을 끄려면 true로 설정하세요.

기본값: 거짓.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ AlwaysVisible: true });

플래시지연

플래시 옵션을 활성화하면 이 옵션을 사용하여 플래시 지연을 지정합니다.

기본값: 1500.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ flashDelay: 1000 });

paneClass

스크롤 막대 트랙 요소의 클래스 이름입니다. 수정하는 경우 CSS 파일에서 해당 내용을 변경해야 합니다.

기본값: '나노판'.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ SliderClass: 'scrollSlider' });

콘텐츠클래스

스크롤 막대 컨테이너 div의 클래스 이름입니다. 수정하는 경우 CSS 파일에서 해당 내용을 변경해야 합니다.

기본값: '나노 콘텐츠'.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ contentClass: 'sliderContent' });

탭인덱스

스크롤 가능한 콘텐츠의 순서를 설정합니다. -1로 설정하면 탭 키를 사용하면 콘텐츠를 건너뜁니다.

기본값: 0.

코드 복사 코드는 다음과 같습니다.

$(".nano").nanoScroller({ tabIndex: 0 });

브라우저 호환

데스크톱

IE7
파이어폭스 3
크롬
사파리 4
오페라 11.60
모바일 기기

iOS 5(iPhone, iPad, iPod Touch)
iOS 4(플러그인 포함)
안드로이드 파이어폭스
Android 2.2/2.3 기본 브라우저(플러그인 포함)
Android Opera 11.6(플러그인 포함)
플러그인을 통해 모바일 장치 브라우저에서 nanoScroller를 더 효과적으로 실행하세요

overthrow.js를 사용하면 nanoScroller가 모바일 브라우저에서 더 잘 작동하도록 할 수 있습니다. 모바일 장치에서 CSS 오버플로(overflow: auto;/overflow: scroll;)를 시뮬레이션합니다.

전복을 사용하려면 페이지에 overthrow.js를 도입하세요.

코드 복사 코드는 다음과 같습니다.

그런 다음 스크롤바 콘텐츠 div에 전복 클래스를 추가하세요.

코드 복사 코드는 다음과 같습니다.

... 여기에 콘텐츠 ...

위는 나노스크롤러 플러그인 사용법에 대한 내용입니다. 마음에 드셨으면 좋겠습니다.