테스트 사이트 - 개발 중인 베타 버전입니다

jquery 스크롤바

· 13년 전 · 4774 · 8
꽤 유명한
이쁜 스크롤 생기는 jquery 입니다 가로스크롤 이미지만 잘 입히면 꽤 이쁩니다.
부드럽게 스크롤 해줍니다
압축푸시고 jquery_custorm_scrollbar.html 여시면 테스트 화면과 동일합니다
열어보시면
제일 하단에 보시면 이부분이 컨트롤 부분입니다
function mCustomScrollbars(){

 //malihu custom scrollbar function parameters:
 //1) scroll type (values: "vertical" or "horizontal") //"#mcs5_container" 제일 하단 모델입니다
 //2) scroll easing amount (0 for no easing)  // 이동 방법입니다 값이 크면 클수록 시간이 이동 시간이 깁니다
 //3) scroll easing type     // jquery.easing.1.3.js 에 기능이 있습니다 easeInQuad , easeOutCirc ....
 //4) extra bottom scrolling space for vertical scroll type only (minimum value: 1)// 수직 스크롤만 생깁니다 하단에 여백을 정의합니다
 //5) scrollbar height/width adjustment (values: "auto" or "fixed") //스크롤을 고정으로 할지를 보여줍니다
 //6) mouse-wheel support (values: "yes" or "no")   //마우스 휠사용할것인지를 보여줍니다
 //7) scrolling via buttons support (values: "yes" or "no")  //수평 스크롤보시면 좌우 버튼을 사용할것인지를 알려줍니다
// 8) buttons scrolling speed (values: 1-20, 1 being the slowest) //버튼을 눌렀을때 이동시간을 정의합니다

 $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
 $("#mcs2_container").mCustomScrollbar("vertical",0,"easeOutCirc",1.05,"auto","yes","no",0);
 $("#mcs3_container").mCustomScrollbar("vertical",900,"easeOutCirc",1.05,"auto","no","no",0);
 $("#mcs4_container").mCustomScrollbar("vertical",200,"easeOutCirc",100,"fixed","yes","no",0);
 $("#mcs5_container").mCustomScrollbar("horizontal",500,"easeOutCirc",1,"fixed","yes","yes",20);
}
있습니다 수정하시면 되고요. 혹몰라 간단한 주석을 달아 놨습니다
간단하게 값만 변경하시면 테스트 해보실수 있습니다
이미지 변경및 레이어변경은  jquery.mCustomScrolbar.css 파일에 있습니다
즐 제작하세요

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 8개

좋은 정보 알려주셔서 고맙습니다. 잘 사용하겠습니다.
오호 활용성이 크군요~
멋지네요
13년 전
고맙습니다~~
오 완전 좋네요
13년 전
멋져요~!
좋은 소스 너무 감사드립니다.^^
제 뽀뽀 받아주세용. ㅎ

게시글 목록

번호 제목
15265
26093
15262
3437
15257
3429
15256
15252
15251
15250
15246
15242
3425
3418
15236
3411
15233
15229
15228
15226
3399
15224
15217
15195
15193
3373
3360
15188
29852
15181
15159
3350
15158
15157
15152
15150
3334
15144
15140
3331
15136
29848
15129
15107
3320
15106
15095
29847
15094
3314
15091
15089
29834
15088
3303
15085
15084
26091
15083
15073
15071
3290
24301
15067
3285
3270
15064
29829
15062
15053
3261
3252
3249
15050
3243
15046
24291
24278
3231
15042
24275
3225
26075
15041
3222
3218
15025
15024
15018
29821
15015
15013
15012
3210
3200
3198
24274
15005
3188
15001