怎么使用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代码
<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>
<scriptclass="lazy" data-src="./jquery-1.11.3.min.js"></script>
</head>
<body>
<divid="box-wrap">
<divid="box"></div>
</div>
</body>
<scripttype="text/javascript">
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();
</script>
</html>
到此，关于“怎么使用jQuery消除网页的滚动条”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
