怎样运用jQuery 消弭网页的滚动条
发布时间：09/01 来源：未知 浏览：
关键词：
网页有些时候需要能滚动的结果，但是不想要滚动条，我就碰到了这样的需求。本人用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>信赖看了这些案例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！
相关阅读：
如何给span标志样式设定width属性
html与xhtml和xml有什么不同
iframe的子页面怎样操纵父页屏蔽页面弹出层结果
HTML中定义多个class属性无效
怎样用按钮触发实现背风光的闪耀
以上就是怎样使用jQuery 消弭网页的滚动条的具体内容，更多请关注百分百源码网其它相关文章！
