自定義滾動條

自定義滾動條（課程鏈接）

學了這節課，感覺收穫了許多，所以想記一下筆記。

思路

整體思路

第一步：創建一個構造函數CusScrollBar
第二步：通過new操作符實例化這個構造函數（初始化函數_init）

拖動滑塊內容滾動的思路

滑塊的可移動距離 = 整個滾動條的高度 - 滑塊的高度
內容可滾動的高度 = 內容的整個高度 - 內容的高度

內容滾動的高度與滑塊滾動的距離這兩者的比率是相同的

滑塊移動的距離/滑塊可移動的距離 == 內容滾動的高度/ 內容可滾動的高度

上面這個式子可以變形：

x1/y1 = x2/y2;
x1/y2 = x2y1;
x1/x2 = y1/y2;

所以比率可以用滑塊可移動的距離/內容可滾動的高度 ==滑塊移動的距離/內容滾動的高度

具體過程：
鼠標拖動滑塊的距離——滑塊移動的距離——滑塊可移動的距離——內容滾動的高度——內容可滾動的高度——設置滑塊位置。

涉及到的知識點

JavaScript 立即調用的函數表達式有哪幾種執行方式?

//第一種
(function(){
//do something here;
})();

//第二種
(function(){
//do something here;
}());

//第三種,在開頭加上!或者~、-、+等
!function(){
//do something here;
};

JavaScript 文法明確規定表達式語句不得以 function 開頭，不然會報錯。所以可以使用其他可用的標識符使其成爲合法的字符串。

知乎上面有關於這個問題的討論

鼠標滾輪事件

firefox中的滾輪事件DOMMouseScroll,其他瀏覽器滾輪事件mousewheel

var mouseWheel = document.getElementById('mouseWheel');
    if (mouseWheel.addEventListener) {
//firefox
        mouseWheel.addEventListener('DOMMouseScroll', function(event) {
//滾輪的事件對象屬性
            event.target.innerHTML = event.detail;
            event.stopPropagation();
            event.preventDefault();
        }, false);
    }
//其他瀏覽器
    mouseWheel.onmousewheel = function(event) {
        event = event || window.event;
//滾輪的事件對象屬性
        mouseWheel.innerHTML = event.wheelDelta;
        event.returnValue = false;
    }

• Firefox 鼠標滾輪向上滾動是-3，向下滾動是3
• IE 鼠標滾輪向上滾動是120，向下滾動是-120
• Opera 鼠標滾輪向上滾動是120，向下滾動是-120
• Chrome 鼠標滾輪向上滾動是120，向下滾動是-120

鼠標滾輪事件屬性瀏覽器的差異

• Firefox中使用detail屬性，其他瀏覽器中使用的wheeldelta屬性
• Firefox中屬性取值+/-3,其他瀏覽器中屬性取值+/-120
• firefox中負數表示向上，其他瀏覽器中正數向上

jQuery事件對象

在jquery中，最終傳入事件處理程序的 event 其實已經被 jQuery 做過標準化處理，其原有的事件對象則被保存於 event 對象的 originalEvent 屬性之中，每個 event 都是 jQuery.Event 的實例。

jQuery.Event.originalEvent指向原生事件

一點思考和優化

• 對與每一個標籤對應的相應的內容，當內容不足時，即內容很少，沒有可視區域的那麼高，那麼當點擊切換tab的話，那麼此時標題的定位不是最上面的。因爲scrollTop屬性是向上捲起的距離，但是此時這個tab內容不夠，那麼上一個tab的內容會佔據這個tab的內容的一部分。老師的思路是加一個矯正元素，根據內容高度來計算矯正元素的高度。其實有一個簡單的辦法，而且不需要js控制。那就是使每一個tab的內容設置爲最小高度爲100%.這樣就可以了。

• 滑塊的高度可以根據內容的多少，動態的變化。可以根據這個比率來設置可視區域的大小/整個內容的高度 ==滑塊的大小/整個滾動條的大小

• html的結構優化

<div class="scroll-cont">
	<div class="scroll-ol">
		<h3 class="anchor">春天來了</h3> 
               <p>xxxxx</p>
	</div>
	<div class="scroll-ol">
		<h3 class="anchor">春天來了</h3> 
               <p>xxxxx</p>
	</div>
....
</div>