自定义滚动条(课程链接)
学了这节课,感觉收获了许多,所以想记一下笔记。
思路
整体思路
第一步:创建一个构造函数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>