怎么使用jQuery消除网页的滚动条

这篇文章主要介绍“怎么使用jQuery消除网页的滚动条”,在日常操作中,相信很多人在怎么使用jQuery消除网页的滚动条问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用jQuery消除网页的滚动条”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

专注于为中小企业提供做网站、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业五峰免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

网页有些时候需要能滚动的效果,但是不想要滚动条,我就遇到了这样的需求。自己用jq写了一个垂直滚动条。

纯css也可以实现

.box::-webkit-scrollbar{display:none}

但是edge和Firefox不兼容,自己想了一下只要监听滚轮事件,用jq写应该很简单,所以就自己写了一下。

原理:需要两个div,第一个就命名为box-wrap吧,它是一个外层的包裹,由于是垂直滚动,所以要固定高度,然后设置overflow:hidden,这样竖直方向超过高度的部分就会被隐藏

第二个div就是内容需要滚动的div,命名为box,采用绝对定位,在监听到鼠标滚轮事件后根据滚轮方向相对移动

css代码

#box-wrap{

position:relative;

width:100%;

height:500px;

overflow:hidden;

}

#box{

position:absolute;

width:100%;

height:1500px;

background:linear-gradient(blue,white);

}

为了能演示效果,里面的盒子我写成了定高,并且让背景渐变,正常来讲可以高度auto让文字撑开就行了,样式的关键在于让父类relative之后再让子类absolute,这样子类就可以相对父类移动

js代码

functioninitScroll(){

//js模拟垂直滚轮滑动

varscrollEle=$('#box');

varscrollWrap=$('#box-wrap');

varscrollSpd=20;//滚轮滚动的速度

varMax_dist=scrollEle.height()-scrollWrap.height();//两个组件底边之间的最大距离

if(Max_dist<=0){

return;

}

scrollEle.css('bottom',-Max_dist);

scrollEle.bind('mousewheel',function(event){

varstep=scrollSpd;

event.preventDefault();

event=event.originalEvent;

//兼容firefox

event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;

vartempPos=parseInt(scrollEle.css('bottom'));

console.log(tempPos);

if(event.delta>0){

if(tempPos>(-Max_dist)){

tempPos-step>(-Max_dist)?tempPos=tempPos-step:tempPos=-Max_dist;

}

}else{

if(tempPos<0){

tempPos+step<0?tempPos=tempPos+step:tempPos=0;

}

}

//console.log(tempPos);

scrollEle.css('bottom',tempPos);

});

}

initScroll();

主要就是监听滚轮事件,从而判断滚轮的方向

event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;

这句是为了兼容火狐,其他浏览器都是属性名称为wheelDelta,值表示为120向上,-120向下,火狐是属性名称为detail,值表示为3向下,-3向上

每次触发滚轮事件都会获取子类的位置,然后根据滚轮的方向调整当前位置,注意判断一下边界就好了

demo代码

functioninitScroll(){

//js模拟垂直滚轮滑动

varscrollEle=$('#box');

varscrollWrap=$('#box-wrap');

varscrollSpd=20;//滚轮滚动的速度

varMax_dist=scrollEle.height()-scrollWrap.height();//两个组件底边之间的最大距离

if(Max_dist<=0){

return;

}

scrollEle.css('bottom',-Max_dist);

scrollEle.bind('mousewheel',function(event){

varstep=scrollSpd;

event.preventDefault();

event=event.originalEvent;

//兼容firefox

event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;

vartempPos=parseInt(scrollEle.css('bottom'));

console.log(tempPos);

if(event.delta>0){

if(tempPos>(-Max_dist)){

tempPos-step>(-Max_dist)?tempPos=tempPos-step:tempPos=-Max_dist;

}

}else{

if(tempPos<0){

tempPos+step<0?tempPos=tempPos+step:tempPos=0;

}

}

//console.log(tempPos);

scrollEle.css('bottom',tempPos);

});

}

initScroll();

到此,关于“怎么使用jQuery消除网页的滚动条”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站名称:怎么使用jQuery消除网页的滚动条
转载来于:http://myzitong.com/article/giocpe.html

其他资讯