有時候在開發過程中，為了一些美化效果，往往需要修改瀏覽器上一些預設的樣式或者事件，讓整個頁面看起來更和諧，舒暢。
比如在開發過程中就遇到修改該瀏覽器預設滾動條的需求，當然使用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');自定義滾動條
滾動條從外觀來看是由兩部分組成 1.滑塊 可以滑動的部分 2.軌道 即滑塊的軌道，一般來說滑塊的顏色比軌道的顏色深。滾動條的css樣式主要有三部分組成 1 webkit scrollbar 定義了滾動條整體的樣式 可以改變滾動條的寬度 2 webkit scrollbar thumb 滑塊部分 可以...
自定義滾動條
body,div 2 某些樣式需ie5.5 才能支援 1 overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2...
自定義滾動條
不主攻前端，最近因為工作原因做了幾個小樣例，已被以後用 樣例中用到的銀行就不上傳了 輸入框1 輸入框2 下拉選項 選項1選項2 選項3選項4 選項5選項6 選項7選項8 選項9 確認 按鈕樣式 global custom btn global custom btn hover 表單樣式 global...