思路
把原有的滚动条隐藏,创建个新的滚动条,并拓展其宽度,达到隐藏的效果,而判断滚动条是否滚动,保存原有的滚动条到顶部的距离,看是否发生改变,做出相应的判断。
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'})
});