分享一則JavaScript滾動條插件源碼

 這是過年的時候自己寫的js滾動條插件的源碼，做出的效果自己並不滿意，正因為做的並不滿意所以回頭重新鞏固和深入學習js，這個插件有如下幾個不太滿意的地方：

內容的過度效果，可以參閱QQ客戶端最近會話列表裡的滾動條，它的滾動非常的平滑，簡單的說就是缺少動畫過渡效果。

並不算完美的兼容性，在IE6、7下的style仍然有點缺憾。

樣式的不完美，例如鼠標懸浮才顯示滾動條，移除後隱藏這種效果都沒有寫。

內部結構的混亂，需要調整內容結構。

滾動條那個圖片畢竟不是美工，自己切圖切的真是惡心到爆了...囧

總體來說還是可以看的，還是缺少一個動畫。在寫這個插件意識到自己的插件用到了一些比較基礎的函數，於是想到把這些函數應該封裝起來，最近仍然在深入學習js，把手頭上這本書看完就應該著手寫這個基礎函數的插件了，當然，動畫引擎必不可少。話不多說，源碼在此（注意：本插件完整版的是有圖片的，請在文末附件中下載完整的插件）：

CSS

 

代碼如下:
.lf_Scroll, .lf_Scroll li { padding: 0; margin: 0; list-style: none; font: 14px/24px "Helvetica Neue" ,Helvetica,Arial, 'Microsoft Yahei' ,sans-serif; outline: none; }
.lf_Scroll { cursor: pointer; width: 10px; position: absolute; right: 0; top: 0; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.lf_ScrollFocus { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
.lfs_Top, .lfs_Center, .lfs_Bottom { background: url('ScrollBar.gif'); width: 10px; height: 10px; }
.lfs_Top { background-position: 1px 0px; }
.lfs_Center { background-position: center 0; height: 100px; }
.lfs_Bottom { background-position: -22px 0; }
/*Developers config*/
.rollDiv { height: 100%; width: 100%; overflow: hidden; position: relative; }

 

JavaScript

 

代碼如下:
/*
* This plugin is defined on the simulation Webpage scroll bar, please insert after binding for DOM events
*
* Comment version: 1.0.0
* Author：linkfly
* Sina:為你聚焦半世紀 | cnblogs:http://www.cnblogs.com/silin6/ | Email:[email protected]
* date：2014-02-05 02:38:35
*
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function (window, undefined) {
//配置參數信息
var config = {
auto: true,
height: 'auto',
width: 'auto'
};
var linkFlyScroll = function (dom, options) {
/// <summary>
/// 1: 生成模擬滾動條對象，【請在本對象工作之後再為您指定的對象綁定事件，否則您之前綁定的事件將不會進行工作】
/// 1.1 - linkFlyScroll(dom) - 在指定的dom上生成滾動條對象
/// 1.2 - linkFlyScroll(dom,options) - 生成滾動條對象，同時提供一系列的參數允許您自定義配置該對象的工作模型
/// </summary>
/// <param name="dom" type="String Or element">
/// 傳入js的dom對象，或者為string類型的該對象ID
/// </param>
/// <param name="options" type="Json">
/// 自定義配置該對象的工作模型，有如下選項：
/// [可選]auto（Boolean）：當內容並未達到容器的高度的時候，是否自動隱藏滾動條，默認為true(是)
/// [可選]height（Int Or String）：默認單位為px，可以為int和String.值為auto則默認采用css的高度
/// [可選]width（Int Or String）：默認單位為px，可以為int和String.值為auto則默認采用css的寬度
/// </param>
/// <returns type="linkFlyScroll" />
if (typeof (dom) === 'string') {
dom = document.getElementById(dom);
}
//沒有指定dom和沒有查找到有效的dom
//linkFlyScroll("")、 linkFlyScroll(null)、linkFlyScroll(undefined)
if (!dom || !dom.nodeType)
return this;
//創建容器對象
var scrollObj = document.createElement('div');
//深度克隆內容對象，並未包含事件，所以需要等到linkFlyScroll對象工作完畢後才可以為該dom對象綁定事件
var cloneObj = dom.cloneNode(true);
scrollObj.className = 'rollDiv';
scrollObj.appendChild(cloneObj);
//替換頁面上當前對象
dom.parentNode.replaceChild(scrollObj, dom);
return new linkFlyScroll.prototype.init(scrollObj, options ? options : {});
};
linkFlyScroll.prototype.init = function (dom, options) {
/// <summary>
/// 1: 本對象才是真正意義上工作的對象，特殊的工作方式是因為可能存在linkFlyScroll的靜態調用和實例化調用
/// 1.1 - init(dom,options) - 在指定的dom上生成滾動條對象
/// </summary>
/// <param name="dom" type="element">
/// dom對象
/// </param>
/// <param name="options" type="Json">
/// 自定義配置該對象的工作模型，有如下選項：
/// [可選]auto（Boolean）：當內容並未達到容器的高度的時候，是否自動隱藏滾動條，默認為true(是)
/// [可選]height（Int Or String）：默認單位為px，可以為int和String.值為auto則默認采用css的高度
/// [可選]width（Int Or String）：默認單位為px，可以為int和String.值為auto則默認采用css的寬度
/// </param>
/// <returns type="linkFlyScroll" />
/*
* 本對象包含以下屬性：
* isDrag:是否正在拖拽滾動條
* startTop:（工作中）滾動條開始滾動位置
* endTop:（工作中）滾動條結束滾動位置
* topLimit:滾動條頂部極限位置
* bottomLimit:滾動條底部極限位置
* context:內容Dom
* scrollRadix:滾動基數
* target:容器Dom
*/
//當前this對象，為防止this指針在環境中會經常改變（例如綁定事件的時候），所以將當前對象保存起來
var currScroll = this;
//DOMElement
if (dom.nodeType) {
//保存容器和內容DOM
currScroll.target = dom;
currScroll.context = dom.firstChild;
//合並配置參數
currScroll.options = tool.extend(config, options);
if (currScroll.options.width !== 'auto') {
dom.style.width = tool.convertValue(currScroll.options.width);
}
if (currScroll.options.height !== 'auto') {
dom.style.height = tool.convertValue(currScroll.options.height);
}
//查找到有效的dom
while (currScroll.context.nodeType != 1) {
currScroll.context = currScroll.context.nextSibling;
}
//創建滾動條dom
currScroll.scrollUl = document.createElement('ul');
currScroll.scrollUl.className = 'lf_Scroll';
currScroll.scrollUl.appendChild(tool.setClass('li', 'lfs_Top'));
currScroll.scrollUl.appendChild(tool.setClass('li', 'lfs_Center'));
currScroll.scrollUl.appendChild(tool.setClass('li', 'lfs_Bottom'));
currScroll.context.style.position = 'relative';
//先呈現在頁面上才可以讀取位置數據
dom.appendChild(currScroll.scrollUl);
this.change();
tool.addScrollEvent(currScroll.context, function (e) {
//綁定鼠標滾輪事件,3px滾動單位
if (e.wheel > 0) {//滾輪向上滾動
var currTop = currScroll.endTop -= 3;
currScroll.scrollEvent.call(currScroll, currTop);
} else {//滾輪向下滾動
var currTop = currScroll.endTop += 3;
currScroll.scrollEvent.call(currScroll, currTop);
}
});
//需要處理禁止文字在拖動的時候被選中 TODO
//鼠標點下事件，需要判斷是否是左鍵點擊，目前右鍵也會實現滾動 TODO
tool.addEvent(currScroll.scrollUl, 'mousedown', function (e) {
mouseDown.call(currScroll, e);
});
//追加事件，為了更好的用戶體驗在body上實現監聽
tool.addEvent(document.body, 'mousemove', function (e) {
if (currScroll.isDrag) {
//獲取當前鼠標位置
var position = tool.getMousePos(e);
//當前滾動條top位置
var currTop = (currScroll.endTop + position.y - currScroll.startTop);
//call是為了讓this指針