课程列表：

自定义滚动条课程001-html和样式的编写

自定义滚动条课程002-滚动条交互脚本的基本代码组织结构以及jQuery的extend函数讲解

自定义滚动条课程003-效果实现分析

自定义滚动条课程004-具体实现代码和效果查看路径

通过前两节的课程我们已经为实现滚动条打好了基础，并准备好了基础材料，接下来我们要开始书写自定义滚动条的核心代码。

滑块滚动效果实现分析

• 第一我们要知道滑块的滚动可能是通过鼠标来完成的，那我们拖动鼠标的距离其实就是滑块要移动的距离
• 第二我们要明确知道滑块可移动距离，滑块可移动距离为当前滑块所在位置到图上滚动条最底部的距离
• 第三我们要明确知道内容区的可视区域
• 第四我们要明确知道内容区的可滚动距离，其实就是文章高度减去内容可视区的高度
• 第五我们要明确知道滑块和内容区的关系即 滑块移动距离/滑块可移动距离 = 内容滚动高度/内容可滚动高度

拖动滑块效果实现思路

鼠标移动距离=》滑块移动距离=》滑块可移动距离=》内容可滚动高度=》计算内容滚动高度=》设置滑块位置

鼠标滚轮事件实现基础知识

由于jQuery没有对鼠标滚轮事件进行封装，所以我们需要自己动手处理下鼠标滚轮事件的浏览器差异。 
Firefox中滚轮事件DOMMouseScroll，其他浏览器事件mousewheel 
$(element).on("mouseWheel","DOMMouseScroll"，mouseWheelHandler)

• Firefox中使用detail属性，其他浏览器中使用wheelDelta属性
• Firefox中属性取值±3的倍数，其他浏览器中取值±120 的倍数
• Firefox中负数表示向上，其他浏览器中正数表示向上。

请您注意

·自觉遵守：爱国、守法、自律、真实、文明的原则
·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品，NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款