原生JS模拟滚动条
求滚动条的高度
可视内容区的高度 / 内容区的实际高度 = 滚动条的高度 / 滑道的高度
求内容区top的值
内容区距离顶部的距离 / (内容区的实际高度 - 可视内容区域的高度 ) = 滚动条距离顶部的距离 / ( 滑道的高度 - 滚动条的高度)
使用onmousewheel做好兼容处理
document.onmousewheel = function (e){
// e.wheelDelta < 0 //(-120) 向下
// e.wheelDelta > 0 //(120) 向上
}
//兼容 Firefox
document.addEventListener('DOMMouseScroll',function (e) {
// e.detail > 0 //(3) 滑轮向下滚动
// e.detail < 0 //(-3) 滑轮向上滚动
},false)
滚动条的运动方向跟内容区的运动方向相反
当滚轮向上运动时 --> 内容区向下运动
当滚轮向下运动时 --> 内容区向上运动
举个例子
滚动条
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
这是内容
