Saetl.net

Simple And Easy TempLate

TinyScrollbarの使い方

  1. 下記ページの中央付近「How to」の項目「Download example」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--ダウンロードしたファイル-->
    <link rel="stylesheet" type="text/css" href="css/TinyScrollbar.css" />
    </head> 
    

    サンプルのcssコード(サンプルのcssは改変しています)

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background: #fff;
    	font-family: Arial;
    }
    #container {
    	width: 520px;
    	margin: 20px auto;
    }
    a {
    	color: #333;
    	text-decoration: none;
    }
    a:hover {
    	color: #ff0000;
    	text-decoration: underline;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからTinyScrollbarの設定*/
    #scrollbar1 {
    	width: 520px;
    	clear: both;
    	margin: 20px 0 10px;
    }
    #scrollbar1 .viewport {
    	width: 500px;
    	height: 200px;
    	overflow: hidden;
    	position: relative;
    }
    #scrollbar1 .overview {
    	list-style: none;
    	position: absolute;
    	left: 0;
    	top: 0;
    }
    #scrollbar1 .thumb .end, #scrollbar1 .thumb {
    	background-color: #003D5D;
    }
    #scrollbar1 .scrollbar {
    	position: relative;
    	float: right;
    	width: 15px;
    }
    #scrollbar1 .track {
    	background-color: #D8EEFD;
    	height: 100%;
    	width: 13px;
    	position: relative;
    	padding: 0 1px;
    }
    #scrollbar1 .thumb {
    	height: 20px;
    	width: 13px;
    	cursor: pointer;
    	overflow: hidden;
    	position: absolute;
    	top: 0;
    }
    #scrollbar1 .thumb .end {
    	overflow: hidden;
    	height: 5px;
    	width: 13px;
    }
    #scrollbar1 .disable {
    	display: none;
    }
    .new {
    	border-top: 2px solid #fa8072;
    	border-right: 1px solid #c6c6c4;
    	border-left: 1px solid #c6c6c4;
    	border-bottom: 1px solid #c6c6c4;
    }
    
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <!--ダウンロードしたファイル-->
    <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script> 
    <!--javascript追記-->
    <script type="text/javascript">
    		$(document).ready(function(){
    			$('#scrollbar1').tinyscrollbar();	
    		});
    </script>
    </body> 
    
    ・<body></body>内にコードを記述。
      <div class="new">
        <div id="scrollbar1">
          <div style="height: 200px;" class="scrollbar">
            <div style="height: 200px;" class="track">
              <div style="top: 0px; height: 67.2269px;" class="thumb">
                <div class="end"> </div>
              </div>
            </div>
          </div>
          <div class="viewport">
            <div style="top: 0px;" class="overview">
              <p>テキストテキストテキストテキスト</p>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <p>テキストテキストテキストテキスト</p>
            </div>
          </div>
        </div>
        <!-- / .new --></div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>TinyScrollbar</title>
    <link rel="stylesheet" type="text/css" href="css/TinyScrollbar.css" />
    </head>
    
    <body>
    <div id="container">
      <div class="new">
        <div id="scrollbar1">
          <div style="height: 200px;" class="scrollbar">
            <div style="height: 200px;" class="track">
              <div style="top: 0px; height: 67.2269px;" class="thumb">
                <div class="end"> </div>
              </div>
            </div>
          </div>
          <div class="viewport">
            <div style="top: 0px;" class="overview">
              <p>テキストテキストテキストテキスト</p>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <p>テキストテキストテキストテキスト</p>
            </div>
          </div>
        </div>
        <!-- / .new --></div>
    </div>
    
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script> 
    <script type="text/javascript">
    		$(document).ready(function(){
    			$('#scrollbar1').tinyscrollbar();	
    		});
    </script>
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル