malihu-custom-scrollbar

  • Arter 2014/5/20
  • http://js.mobi.net.tw/mscrollbar/
  • CSS

    <!-- style for demo and examples -->
    <style>
    	.content{margin:40px; width:260px; height:200px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
    </style>
    <!-- Custom scrollbars CSS -->
    <link href="http://js.mobi.net.tw/mscrollbar/mScrollbar.css" rel="stylesheet" />
    

    js

    <script src="http://js.mobi.net.tw/jquery-1.10.1.min.js"></script>
    <!-- custom scrollbars plugin -->
    <script src="http://js.mobi.net.tw/mscrollbar/mScrollbar.js"></script>
    <script>
    (function($){
    	$(window).load(function(){
    		$("#content_1").mCustomScrollbar({
    		set_width:false, /*optional element width: boolean, pixels, percentage*/
    		set_height:false, /*optional element height: boolean, pixels, percentage*/
    		horizontalScroll:false, /*scroll horizontally: boolean*/
    		scrollInertia:950, /*scrolling inertia: integer (milliseconds)*/
    		mouseWheel:true, /*mousewheel support: boolean*/
    		mouseWheelPixels:"auto", /*mousewheel pixels amount: integer, "auto"*/
    		autoDraggerLength:true, /*auto-adjust scrollbar dragger length: boolean*/
    		autoHideScrollbar:false, /*auto-hide scrollbar when idle*/
    		scrollButtons:{ /*scroll buttons*/
    			enable:false, /*scroll buttons support: boolean*/
    			scrollType:"continuous", /*scroll buttons scrolling type: "continuous", "pixels"*/
    			scrollSpeed:"auto", /*scroll buttons continuous scrolling speed: integer, "auto"*/
    			scrollAmount:40 /*scroll buttons pixels scroll amount: integer (pixels)*/
    		},
    		advanced:{
    			updateOnBrowserResize:true, /*update scrollbars on browser resize (for layouts based on percentages): boolean*/
    			updateOnContentResize:false, /*auto-update scrollbars on content resize (for dynamic content): boolean*/
    			autoExpandHorizontalScroll:false, /*auto-expand width for horizontal scrolling: boolean*/
    			autoScrollOnFocus:true, /*auto-scroll on focused elements: boolean*/
    			normalizeMouseWheelDelta:false /*normalize mouse-wheel delta (-1/1)*/
    		},
    		contentTouchScroll:true, /*scrolling by touch-swipe content: boolean*/
    		callbacks:{
    			onScrollStart:function(){}, /*user custom callback function on scroll start event*/
    			onScroll:function(){}, /*user custom callback function on scroll event*/
    			onTotalScroll:function(){}, /*user custom callback function on scroll end reached event*/
    			onTotalScrollBack:function(){}, /*user custom callback function on scroll begin reached event*/
    			onTotalScrollOffset:0, /*scroll end reached offset: integer (pixels)*/
    			onTotalScrollBackOffset:0, /*scroll begin reached offset: integer (pixels)*/
    			whileScrolling:function(){} /*user custom callback function on scrolling event*/
    		},
    		theme:"light" /*"light", "dark", "light-2", "dark-2", "light-thick", "dark-thick", "light-thin", "dark-thin"*/
    		});
    	});
    })(jQuery);
    </script>
    

    HTML

    <!-- content block -->
    <div id="content_1" class="content">
    	<p>xxxxxx</p>
    	<p>xxxxxx</p>
    	<p>xxxxxx</p>
    	<p>xxxxxx</p>
    	<p>xxxxxx</p>
    	<p>xxxxxx</p>
    	<p>xxxxxx</p>
    	<p>xxxxxx</p>
    	<p>xxxxxx</p>
    </div>
    

    範例