Skip to content

fangxiangxiang/Custom-Scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 

Repository files navigation

#jQuery实现自定义滚动条

	jQuery事件对象

jQuery事件对象对原生事件的差异进行封装和修正,统一了事件对象的属性和方法。 jQuery.Event.originalEvent:指向原生事件

	jQuery事件对象属性

event.pageX() 鼠标相对于文档左侧边缘的距离

event.pageY() 鼠标相对于文档顶部边缘的距离

	元素属性

div.scrollTop "元素中的内容(文档内容)"超出"元素上边界"的那部分高度(像素数)

div.scrollLeft "元素中的内容(文档内容)"超出"元素左边界"的那部分宽度(像素数)

div.scrollHeight 获取元素的完整高度,以像素为单位

div.scrollWidth 获取元素的完整高度,以像素为单位

	jQuery提供的位置方法

scrollTop 获取匹配的元素集合中第一个元素的当前垂直滚动条的位置, 也就是"该元素中的内容"超出"该元素上边界"的那部分像素数

scrollTop(value) 设置每个匹配元素的垂直滚动条位置, 滚动条垂直位置和"元素中的内容"超出"元素上边界"的那部分像素数是相同的

Position() 获取匹配元素中第一个元素的当前坐标, 相对于离该元素最近且被定位过的父元素 (relative,absolute,fixed) Position(coordinates) 设置匹配的元素集合中每一个元素的坐标,坐标相对于文档 如:{x:10,y:20}

	滚动比率

滑块移动距离/滑块可移动距离 = 内容滚动高度/内容可滚动高度 → 滑块移动距离内容可滚动高度 = 滑块可移动距离内容滚动高度 → 内容可滚动高度/滑块可移动距离 = 内容滚动高度/滑块移动距离 = dragContBarRate

鼠标移动距离 →(=) 滑块移动距离 → 滑块可移动距离 → 内容可滚动高度 → 内容滚动高度(这一步通过比率获得) → 设置滑块位置

内容可滚动高度 = 整篇内容完整的高度-内容可视区的高度 滑块可移动的高度(距离) = 滚动条的高度-滑块的高度

	鼠标滚轮事件浏览器的差异

Firefox中滚轮事件DOMMouseScroll,其他浏览器滚轮事件是mousewheel $(element).on("mouseWheel","DOMMouseScroll",mouseWheelHandler)

	鼠标滚轮事件属性浏览器的差异

Firefox中使用detail属性,其他浏览器中使用wheeldelta属性 Firefox中属性取值±3(倍数),其他浏览器中属性取值±120(倍数) Firefox负数表示向上,其他浏览器中正数表示向上

About

jQuery实现自定义滚动条

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published