自定义滚动条

自定义滚动条（课程链接）

学了这节课，感觉收获了许多，所以想记一下笔记。

思路

整体思路

第一步：创建一个构造函数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>