首页
自定义滚动条
健康小知识
Python课程笔记
Gradle教程
Jenkins
正则表达式
NoteShare之笑傲江湖
前端编码规范-个人制定
MySql常用知识梳理
常用bat文件
前端面试题库
Maven教程
AngularJs
前端公共工具类
mongodb
更多……
申请加入课程
自定义滚动条-html和样式的编写
自定义滚动条-交互脚本的基本代码组织结构以及jQuery的extend函数讲解
自定义滚动条-效果实现分析
自定义滚动条-具体实现代码和效果查看路径
自定义滚动条-效果实现分析
星辰
2018-05-26
0
0
210
人
0
人评论
0
人举报
> 通过前两节的课程我们已经为实现滚动条打好了基础，并准备好了基础材料，接下来我们要开始书写自定义滚动条的核心代码。 #### 滑块滚动效果实现分析  * 第一我们要知道滑块的滚动可能是通过鼠标来完成的，那我们拖动鼠标的距离其实就是滑块要移动的距离 * 第二我们要明确知道滑块可移动距离，滑块可移动距离为当前滑块所在位置到图上滚动条最底部的距离 * 第三我们要明确知道内容区的可视区域 * 第四我们要明确知道内容区的可滚动距离，其实就是文章高度减去内容可视区的高度 * 第五我们要明确知道滑块和内容区的关系即 滑块移动距离/滑块可移动距离 = 内容滚动高度/内容可滚动高度 #### 拖动滑块效果实现思路 鼠标移动距离=》滑块移动距离=》滑块可移动距离=》内容可滚动高度=》计算内容滚动高度=》设置滑块位置  #### 鼠标滚轮事件实现基础知识 > 由于`jQuery`没有对鼠标滚轮事件进行封装，所以我们需要自己动手处理下鼠标滚轮事件的浏览器差异。 `Firefox`中滚轮事件`DOMMouseScroll`，其他浏览器事件`mousewheel` `$(element).on("mouseWheel","DOMMouseScroll"，mouseWheelHandler)` * Firefox中使用detail属性，其他浏览器中使用wheelDelta属性 * Firefox中属性取值±3的倍数，其他浏览器中取值±120 的倍数 * Firefox中负数表示向上，其他浏览器中正数表示向上。
所有评论列表
点我发表评论
