如何使用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>
 
  <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>







本文转载自中文网

推荐阅读