tiny Scrollbar

  • Arter 2014/5/19
  • http://js.mobi.net.tw/tinyscrollbar/
  • CSS

    <link rel="stylesheet" href="http://js.mobi.net.tw/tinyscrollbar/style/tinyscrollbar.css" type="text/css" media="screen"/><!--捲軸-->
    <style type="text/css">
    #scrollbar1 { width: 820px; clear: both; margin: 20px 0 10px; }
    #scrollbar1 .viewport { width: 800px; height: 500px; overflow: hidden; position: relative; }
    </style>
    

    js

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://js.mobi.net.tw/tinyscrollbar/scripts/jquery.tinyscrollbar.js"></script><!--捲軸-->
    <script type="text/javascript">
    $(document).ready(function(){//捲軸
    	$('#scrollbar1').tinyscrollbar();
    });
    </script>
    

    HTML

    <div id="scrollbar1">
    	<div class="scrollbar">
    		<div class="track"><div class="thumb"><div class="end"></div></div></div>
    	</div>
    	<div class="viewport">
    		<div class="overview">
    <!--內容-->
    //內容內容
    <!--內容-->
    		</div>
    	</div>
    </div>
    
    

    下載

    tinyscrollbar.rar

    範例