jQuery – jScrollPane 重新初始化調整捲軸

 

jScrollPane 是jQuery 的捲軸外掛套件,
很多時候當畫面的div使用了margin或是padding或是動態增減元素的時候
捲軸不會跟著增減。所以把參數autoReinitialise設為true即可解決。

預設值是關閉的,建議在多數時候都將他打開,避免有時候DIV超出界線捲軸卻無法置底的問題。

 

[jQuery] jscrollpane 改變捲軸顏色

使用方法如下:

[html]
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>

<style>
/* 替換原始 CSS 設定 end */

.jspVerticalBar {
/*整列*/
}

.jspTrack {
/* 剩餘區塊 */
}
.jspDrag {
/* 目前可拉動的區塊 */
}

/* 替換原始 CSS 設定 end */
.demo{
width:500px;
height:100px;
float:left;
}

</style>

<script>
$(function (){
$(‘.demo’).jScrollPane();
})
</script>

<div class="demo">
<ul>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
<li>文字文字</li>
</ul>
</div>
<div>
其他區塊
</div>
[/html]