（适用于大部分浏览器）js+css 实现滚动条滑动时显示，不滑动时隐藏

最新推荐文章于 2023-04-28 16:42:07 发布

原创最新推荐文章于 2023-04-28 16:42:07 发布 · 6.5k 阅读

7 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

8 篇文章

订阅专栏

思路

把原有的滚动条隐藏，创建个新的滚动条，并拓展其宽度，达到隐藏的效果,而判断滚动条是否滚动，保存原有的滚动条到顶部的距离，看是否发生改变，做出相应的判断。

html

 <body>
    <div id='wrapper'>
       ...
       ...
    </div>
 </body>

css

body{
/* 隐藏原有的滚动条 */
overflow: hidden;
}
#wrapper{
width: 1940px; /* 宽度，通常浏览页面是1920px ，根据实际状况做调整，通常滚动条为20px，大于20即可隐藏 */
height: 1000px;
overflow-y: scroll; /* 创建新的滚动条*/
padding-right: 20px; /* 滚动条右边距 */
}

js

var topValue = 0
interval = null;// 定时器  
jQuery('#wrapper').scroll(function(){  
             if(interval == null){// 未发起时，启动定时器，1秒1执行  
                   interval = setInterval(function(){
                 // 判断是否滚动
                if(jQuery('#wrapper').scrollTop()== topValue){    
                       clearInterval(interval);  
                       interval = null;  
                       // 没有滚动，则隐藏,padding边距，根据开发状况修改，此处是为了，不影响之前的css，width同理，通常是1940px,达到滚动条隐藏效果
                       jQuery("#wrapper").css({width:'1940px',padding:'0px 20px 0px 0px'})                  
                      }
                   }, 1000); 
             }
            topValue = jQuery('#wrapper').scrollTop(); 
            //滚动，则显示,padding边距，根据开发状况修改，此处是为了，不影响之前的css，width同理，通常是1940px,达到滚动条隐藏效果   
         jQuery("#wrapper").css({width:'1920px',padding:'0px 0px 0px 0px'})
        });