jQuery

【jQuery】カスタムスクロール領域を実装ZScroll

February 8, 2017
zscroll

ZScrollは、jQueryを使用してエリアスクロールを簡単に実装するプラグイン。

How to

jQueryとZScroll JavaScriptファイル

<!-- JQuery plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- ZScroll Dependancies -->
<script src="plugins/ZScroll/ZScroll.js"></script>

.ZScroll()を呼び出し

// Apply ZScroll to all elements with class '.ZScroll'
$(document).ready(function(){
    $(".ZScroll").ZScroll();
});

オプションをオブジェクトとしてZScrollに渡す(値はデフォルト)

// ScrollZoneColor:"#DDDDDD",
// ScrollBarColor:"orange",
// ScrollBarWidth:5,
// ScrollBarHeight:null,
// ScrollBarMinHeight:10,
// ScrollBarPadding:10,
// ScrollBarRadius:10,
// ScrollBarUnusedCSS:{"opacity":0.5},
// ScrollBarInUseCSS:{"opacity":1},
// ScrollBarOpacityEasing:300,
// ScrollWheelDistance:50,
// Active:"auto"
// Display:true

// Pass like:
$(".ZScroll").ZScroll({
    ScrollBarColor:"green",
    ScrollBarWidth:10
});