在前面一篇說的是滾動條效果，本篇繼續在前面的基礎上面針對滾動條進行操作。本次要實現的效果如下：拖動滾動條左右移動時，上面的內容也相對外層盒子做相對移動。
下面針對要實現的效果進行分析：首先是頁面基礎結構，要實現內容的相對移動，裡面的內容需要針對外層盒子相對定位，寬度應該大於外層盒子，而且外層盒子應該超出隱藏。下面是乙個滾動條，由底層和滾動兩部分組成。
此時我們已經實現了基礎的頁面效果，但是，需要注意的時，在上面的效果中，我們為滾動條設定了滾動寬度，但是在實際過程中，當外層盒子寬度固定時，滾動內容越長，滾動條會越短。為了實現拖動滾動條時，內容相對運動，在滾動條和內容之間存在著一定的比例關係：滾動條 / 盒子的長度 = 盒子的長度 / 內容的長度，因此，我們首先需要根據這個關係計算出滾動條實際的寬度。
<接下來就需要監聽滑鼠事件了，首先是滑鼠的移入事件，當滑鼠移入時，記錄滑鼠相對於盒子左邊的距離，當滑鼠移動時，根據滑鼠的移動距離，改變滾動條的位置，實現滾動效果，同時需要計算出內容相對需要滾動的距離，最後就是滑鼠移出事件，當滑鼠移出時，清空事件。script
>
window.onload
=function
() script
>
其中，在滾動條移動和內容滾動之間也存在乙個換算關係：內容走的距離 / 滾動條走的距離 = （內容的長度 - 盒子的長度）/ （盒子長度 - 滾動條的長度）。因此，當我們計算處了滾動條走的距離後，就可以得出內容走的距離了。
//滑鼠事件只需要把握住盒子，滾動條，內容之間的換算關係，計算處相對運動距離，上面的效果就可以輕鬆實現了。mask.onmousedown = function (event) else if(endx
>
= box.offsetwidth - mask.offsetwidth)
//運動效果
mask.style.left = endx + 'px';
// 內容走的距離 = （內容的長度 - 盒子的長度） \/ (盒子長度 - 滾動條的長度) * 滾動條走的距離
var content_len = (box_top.offsetwidth - box.offsetwidth) / (box.offsetwidth - mask.offsetwidth) * endx;
box_top.style.left = -content_len + 'px';
return false;
};document.onmouseup = function ()
}
JS之滾動條效果
滾動條在前端頁面中是進行見到的，但是在不同的瀏覽器中，預設的滾動條樣式不同，有些瀏覽器的預設樣式也不好更改，因此，我們可以自定義滾動條，接下來就從乙個例項開始進入滾動條。首先要實現的是上面的這種效果 當滑鼠拖拽手柄前後移動時，滾動條的填充色和右側的百分比隨之一起變化。為了實現上面效果，我們先來分析頁...
Js 新增滾動條
我遇到的問題是 滾動條可以新增，但是下面的儲存和返回按鈕顯示不出來 剛開始就是加在div上，但是按鈕還是顯示不出來 然後慢慢嘗試，後來發現div裡的滾動條設定是針對table的，所以說，不管你在這個div裡面巢狀了幾個div,有效果的就只能是裡面的table，但是你如果在最外面的div裡設定了滾動條...
js滾動條控制
js控制滾動條的位置 window.scrollto x,y 豎向滾動條置頂 window.scrollto 0,0 豎向滾動條置底 window.scrollto 0,document.body.scrollheight js控制textarea滾動條自動滾動到最下部 document.getel...