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

思路

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

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'})
        });   

猜你喜欢

转载自blog.csdn.net/qq_21570029/article/details/79865478
今日推荐