tags: Javascript Scrollbar
Common 前言
- 實際上github可以找到很多Javascript的Custom Scrollbar
- 但不知道什麼原因，前幾個我的專案都無法套用，一共測試了8個plugin，直到jQuery.NiceScroll才成功，完美的套用
- 但這個plugin還是有缺點，無法使用css的hover
jQuery.NiceScroll
HOW TO USE 如何實現
- Initialize nicescroll
- 預設樣式
- 客製化樣式
- 隨著內容變化而調整大小
// 1. Simple mode, it styles document scrollbar:
$(function() {
$("body").niceScroll();
});
// 3. Style a DIV and change cursor color:
$(function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
});
// 7. Check for scrollbars resize (when content or position have changed):
$("#mydiv").getNiceScroll().resize();
PARAMETERS 常用參數
- cursorcolor：顏色
- cursoropacitymin/cursoropacitymax：使用/沒有使用的透明度
- cursorwidth：寬度
- cursorborder：邊界
- cursorborderradius：圓角半徑
- autohidemode：沒有使用的時候，是否自動隱藏
- background：滑軌的顏色
$("#thisdiv").niceScroll({
cursorcolor: "#424242", // change cursor color in hex
cursoropacitymin: 0, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
cursorwidth: "5px", // cursor width in pixel (you can also write "5px")
cursorborder: "1px solid #fff", // css definition for cursor border
cursorborderradius: "5px", // border radius in pixel for cursor
autohidemode: true, // how hide the scrollbar works, possible values:
true | // hide when no scrolling
"cursor" | // only cursor hidden
false | // do not hide,
"leave" | // hide only if pointer leaves content
"hidden" | // hide always
"scroll", // show only on scroll
background: "", // change css for rail background
});
Example 範例
範例1
- HTML
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<!-- scrollbar -->
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/setting.js"></script>
</head>
<body class="h-100 w-100">
<!-- 略... -->
</body>
</html>
- Javascript
// Scrollbar
$("body").niceScroll({
cursorcolor: "#5F388F",
cursoropacitymin: 0.25,
cursoropacitymax: 1,
cursorwidth: "15px",
cursorborder: "1px solid #fff",
});
-
結果
- 未使用時，透明度會變為0.25
範例2
function initScrollbar() {
$(".blueScrollbar .v-scrollable").niceScroll({
cursorcolor: "#0026BF",
cursorborder: "1px solid #30BAFF",
autohidemode: false,
cursorwidth: "10px"
});
}
$(document).ready(function() {
$(".v-scrollable").getNiceScroll().resize();
$(".v-scrollable").mouseover(function() {
$(".v-scrollable").getNiceScroll().resize();
});
});
-
結果
其他 Plugin
- perfect-scrollbar：https://github.com/utatti/perfect-scrollbar
- malihu-custom-scrollbar-plugin：https://github.com/malihu/malihu-custom-scrollbar-plugin
- jScrollPane：https://github.com/vitch/jScrollPane
沒有留言:
張貼留言