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

来源：动视网责编：小采时间：2020-11-27 15:26:07

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

如何使用jQuery消除网页的滚动条:这次给大家带来如何使用jQuery 消除网页的滚动条，使用jQuery 消除网页的滚动条的注意事项有哪些，下面就是实战案例，一起来看一下。网页有些时候需要能滚动的效果，但是不想要滚动条，我就遇到了这样的需求。自己用jq写了一个垂直滚动条。纯css也可以实现

推荐度：

点击下载本文 文档为doc格式

导读如何使用jQuery消除网页的滚动条:这次给大家带来如何使用jQuery 消除网页的滚动条，使用jQuery 消除网页的滚动条的注意事项有哪些，下面就是实战案例，一起来看一下。网页有些时候需要能滚动的效果，但是不想要滚动条，我就遇到了这样的需求。自己用jq写了一个垂直滚动条。纯css也可以实现

这次给大家带来如何使用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代码

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 || 0) / 3;
 var tempPos = 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>
 <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 || 0) / 3;
 var tempPos = 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>

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

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

推荐度：

点击下载本文 文档为doc格式

标签：去除使用浏览器

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐