關於實現自定義滾輪，首先要對整個布局進行了解：
1、 1.需要顯示的層級 和 2.需要被滾動層級 的關係：
1--層級1具有 溢位隱藏 屬性，目的是為了隱藏 層級2 多出的部分。
2--由於在層級1的包裹之下層級2溢位隱藏部分可以通過控制層級1的scrolltop進行滾動。
2、 滾動條的位置：
1--如果你後面是通過控制層級2的top值進行滾動，那麼滾動條可直接相對於層級1進行絕對定位。
2--如果你是通過控制層級1的scrolltop進行滾動，那麼滾動條就需要在外面多加一層包裹層，目的就是讓滾動條不隨著層級1往上滾。
這裡我用的方法是2--2。
下面進入邏輯關係：
1、首先肯定要從滾動條下手：
1--計算滾動條的高度，這裡有一點需要注意，層級1的高度與滾動條的總高度是一樣的，通過相似比例計算：
滾動條總高度 ：滾動條高度 = 層級2 ：層級1
=>滾動條高度 = 滾動條總高度 /（層級2 / 層級1）
2--計算滑鼠拖動滾動條時的座標位置，首先要讓滑鼠無論點選滾動條哪乙個位置，都變成點選滾動條的頂點座標：
通過獲取 瀏覽器的y軸座標 - 滾動條被點選的y軸座標 得到
3--實現滾動條拖動的公式：
四要素，1-拖動時瀏覽器的y軸座標，2-點選時滾動條的y軸座標，3-瀏覽器scrolltop的值，4-當前容器的top值。
公式：1 - 2 + 3 - 4
解：1 - 2 => 計算滾動條頂點座標
1 - 2 + 3 => 為了避免瀏覽器y軸座標受滾動條數值的影響，必須加上瀏覽器scrolltop的值
1 - 2 + 3 - 4 => 為了避免滾動條受容器的位置影響，必須先清除容器的top值，也就是假設他們全都在同乙個y軸頂點上
4--限制滾動條的拖動範圍：
太簡單就不解釋了。
5--計算滾動條的當前頂點值與頂點可移動的極限值的比：
計算他們的比例純粹是為了控制 層級2 與 層級1。這是乙個0-1的動態比值
2、所有東西都準備好了，剩下就是控制 層級2 與 層級1：
1--首先獲取它們兩個層級的高度，然後計算出層級2頂點可移動的極限值。
頂點可移動極限值：層級2 - 層級1。
2--控制 層級1 的scrolltop，滾動的距離與滾動條相呼應：
頂點可移動極限值 * 滾動條滾動的比值
3--完成。
自定義滾動條
滾動條從外觀來看是由兩部分組成 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...