首页 / 知识

如何使用jQuery 消除网页的滚动条

2023-04-11 15:07:00

　　网页有些时候需要能滚动的效果，但是不想要滚动条，我就遇到了这样的需求。自己用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>
 
　　<scriptsrc="./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>







本文转载自中文网

网页滚动条事件需求不兼容消除

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢