原生封裝自定義滾動條

有時候在開發過程中，為了一些美化效果，往往需要修改瀏覽器上一些預設的樣式或者事件，讓整個頁面看起來更和諧，舒暢。

比如在開發過程中就遇到修改該瀏覽器預設滾動條的需求，當然使用css的偽元素也可以修改瀏覽器滾動條的預設樣式，但是存在相容性問題，由於各大瀏覽器廠商對瀏覽器的設計略有不同，比如說瀏覽器核心，再加上瀏覽器高低版本的相容，所以實現出來的效果並不盡人意。

下面是針對瀏覽器縱向滾動條而實現的自定義滾動條。

先分析一下：

既然是滾動條，首先要有乙個滾動的限制，即滾動範圍

滑鼠可以拖動滑塊在滾動範圍內隨意滾動

滑鼠拖動滑塊過程中，與之相關的內容區域需要做跟隨滾動效果

需要用到的事件：

下面是具體的實現**：

這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。這裡是測試文字。

#chute #slider #container #content

;(function ()  container  	string	盒子
* @param  content		string	內容
* @param  slider		string	滑塊
* @param  chute		string	滑條
*/var customslider = function (container,content,slider,chute) 
//註冊事件
this.addevent();
}	//原型共享
customslider.prototype = ;
//註冊滑鼠彈起事件
document.onmouseup = _this.mouseup;
//阻止預設事件
return false;
};},
//滑鼠彈起響應事件
mouseup: function (ev) 
}	window.customslider = customslider;
})()

呼叫方法：

var slider = new customslider('container','content','slider','chute');

原生封裝自定義滾動條

自定義滾動條

自定義滾動條

自定義滾動條

相關推薦