承上：頁面內拖拽方框 、頁面內拖動、解決頁面內拖動選中文字的問題
新建一個div2，並且在div2中嵌入一個div3。div3的寬由div2限定，高由文字撐開。現在要將div3中的文字滾動，那麼需要一個滾動條，當滾動條中的紅色塊從左到右滾動時，div3中的文字也隨之滾動。
新建滾動條。當div1從左到右移動時，其在父級div中的座標相對於父級的寬度從0到1逐漸變化，該比值存在scale變量中。
<!DOCTYPE html>
<html>
<head>
<title>自定義滾動條</title>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
</body>
<style type="text/css">
#parent{width: 600px; height: 20px; background-color: #CCC; position: relative; margin: 0 auto; }
#div1{ width: 20px; height: 20px; background-color: red; position: absolute; left: 0; top: 0; }
</style>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oParent = document.getElementById('parent');
var disX = 0;
oDiv1.onmousedown = function(ev){
disX = ev.clientX - oDiv1.offsetLeft;
document.onmousemove = function(ev){
var l = ev.clientX - disX;
if (l<0) {
l = 0;
} else if(l>oParent.offsetWidth-oDiv1.offsetWidth){
l = oParent.offsetWidth-oDiv1.offsetWidth;
}//div塊不超出左右兩邊
oDiv1.style.left = l + 'px';
var scale = l/(oParent.offsetWidth-oDiv1.offsetWidth);
document.title = scale;
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</html>
下面將div3的top的值，由scale標誌。就可以得到完整的滾動示例。scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)中的減法，是減去一個div2的高度，使最終的文字停留在框內。不理解的人可以去掉-oDiv2.offsetHeight，看看效果。scale前面的負號，是爲了控制文字滾動方向。實例展示如下
<!DOCTYPE html>
<html>
<head>
<title>自定義滾動條</title>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作爲開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基於原型編程、多範式的動態腳本語言，並且支持面向對象、命令式和聲明式（如函數式編程）風格。 [1]
JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因爲Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名爲JavaScript。但實際上它的語法風格與Self及Scheme較爲接近。 [2]
JavaScript的標準是ECMAScript 。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準。2015年6月17日，ECMA國際組織發佈了ECMAScript 的第六版，該版本正式名稱爲 ECMAScript 2015，但通常被稱爲ECMAScript 6 或者ES6。
</div>
</div>
</body>
<style type="text/css">
#parent{width: 600px; height: 20px; background-color: #CCC; position: relative; margin: 0 auto; }
#div1{ width: 20px; height: 20px; background-color: red; position: absolute; left: 0; top: 0; }
#div2{ width: 300px; height: 200px; border: 1px solid black; overflow: hidden; position: relative; margin: 30px auto; }
#div3{ position: absolute; left: 0; top: 0; }
</style>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oParent = document.getElementById('parent');
var disX = 0;
var disY = 0;
oDiv1.onmousedown = function(ev){
disX = ev.clientX - oDiv1.offsetLeft;
document.onmousemove = function(ev){
var l = ev.clientX - disX;
if (l<0) {
l = 0;
} else if(l>oParent.offsetWidth-oDiv1.offsetWidth){
l = oParent.offsetWidth-oDiv1.offsetWidth;
}//div塊不超出左右兩邊
oDiv1.style.left = l + 'px';
var scale = l/(oParent.offsetWidth-oDiv1.offsetWidth);
document.title = scale;
oDiv3.style.top = -scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</html>
