[摘要]0) / 3;这句是为了兼容火狐,其他浏览器都是属性名称为wheelDelta,值表示为120向上,-120向下,火狐是属性名称为detail,值表示为3向下,-3向上每次触发滚轮事件都会获取子类的...
0) / 3;
这句是为了兼容火狐,其他浏览器都是属性名称为wheelDelta,值表示为120向上,-120向下,火狐是属性名称为detail,值表示为3向下,-3向上
每次触发滚轮事件都会获取子类的位置,然后根据滚轮的方向调整当前位置,注意判断一下边界就好了
demo代码
<html>
<head>
<style>
#box-wrap{
position: relative;
width: 100% ;
height: 500px ;
overflow: hidden;
}
#box{
position: absolute;
width: 100% ;
height: 1500px ;
background: linear-gradient(blue,white) ;
}
</style>
<script src="./jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="box-wrap">
<div id="box"></div>
</div>
</body>
<script type="text/javascript">
function initScroll(){
//js模拟垂直滚轮滑动
var scrollEle = $('#box') ;
var scrollWrap = $('#box-wrap') ;
var scrollSpd = 20 ;//滚轮滚动的速度
var Max_dist = scrollEle.height()-scrollWrap.height() ;//两个组件底边之间的最大距离
if(Max_dist<=0){
return ;
}
scrollEle.css('bottom',-Max_dist) ;
scrollEle.bind('mousewheel',function(event){
var step = scrollSpd ;
event.preventDefault() ;
event = event.originalEvent ;
//兼容firefox
event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail
关键词:如何运用jQuery 消除页面的滚动条