實戰 jQuery實現自定義滾動條外掛程式

大體思路:

如何實現滾動滑塊，讓滑塊與內容一起聯動呢？請看下圖：

首先來看，

空心滑鼠位置與實心滑鼠位置的距離

是不是等於滑塊移動的距離x0

呢？答：等於

滑塊移動的最大距離x0是多少呢？

答：滾動條的高度x - 滑塊的高度

內容能滾動最大高度y0是多少呢？

答：內容總高度y - 內容可視區的高度

通過比較：可以得出滾動比率：

那麼**應該怎麼寫呢：

第一步： 獲取滑鼠移動距離 = 滑塊移動距離

第二步： 獲取滑塊可移動的距離

第三步： 內容可滾動的高度

第四步： 通過上面的滾動比例關係可以獲取內容滾動高度

最五步：設定滑塊的位置

外掛程式封裝大框：

補充：

（自呼叫匿名函式：通過建立乙個自呼叫匿名函式，建立乙個特殊的函式作用域，該作用域中的**不會和已有的同名函式、方法和變數以及第三方庫發生衝突。)

原型上新增方法：

方案1：

cusscrollbar.prototype._init = function

() 

$.extend(cusscrollbar.prototype, ,

b: function
() {}
})

暴露建構函式，使外部可呼叫：

win.cusscrollbar = cusscrollbar;

_init()函式：

1 _init: function

(options) ;
12//
通過深拷貝將外部引數與預設引數合併
13   $.extend(true, self.options, options ||{});
14//
呼叫_initdomevent方法
15self._initdomevent();
16//
返回self，實現鏈式呼叫
17return
self;
18 },

_initdomevent()函式：

1 _initdomevent: function

() ,

_initsliderdragevent()函式

1 _initsliderdragevent: function

() 23
24//
繫結事件
25     slider.on('mousedown', function
(e) );
41});42}
43return
self;
44 },

getmaxsliderposition()

1

//滑動可移動的距離
2 getmaxsliderposition: function
() ,

mousemovehandler()

1

function
mousemovehandler(e) 

scrollto()

1

//移動到具體位置
2 scrollto: function
(positionval) ,

_bindcontscroll()

1

//監聽內容的滾動，同步滑塊的位置
2 _bindcontscroll: function
() 9
});10
return
self;
11 },

getsliderposition()

//

計算滑塊兒的當前位置
getsliderposition: function
() ,

jQuery，自定義滾動條

目的 用js模擬實現滾動條，從而達到設計圖以及產品要求的效果 原理 伴隨著父級容器overflow，控制絕對容器的left,top值，從而達到效果。html 1 div id show 23 div id container 4 p 1326546478797897987 p 5 p 1326546...

4 自定義資料《jquery實戰》

data key value 在元素上存放資料,返回jquery物件。key string 儲存的資料名.key,value string,any key 儲存的資料名 value 將要儲存的任意資料 obj object 為集合中的每個元素新增鍵 值對物件資料 data key value 使用j...

自定義滾動軸

webkit 這個是谷歌瀏覽器的字首，自定義滾動軸只有谷歌瀏覽器支援。webkit scrollbar 滾動軸整體 webkit scrollbar thumb 滑塊 webkit scrollbar track 滑動軌道 webkit scrollbar button 兩端按鈕 webkit sc...