课程列表:


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







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

滑块滚动效果实现分析

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

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

拖动滑块效果实现思路

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

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

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

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

  • Firefox中使用detail属性,其他浏览器中使用wheelDelta属性
  • Firefox中属性取值±3的倍数,其他浏览器中取值±120 的倍数
  • Firefox中负数表示向上,其他浏览器中正数表示向上。
作者:星辰 时间:2016-09-26 浏览 830评论 0 赞 0砸 0 标签: jquery 课程 前端 demo
评论
还可以再输入500个字

请您注意

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