介绍。箱:-webkit-scrollbar{显示:没有} #箱包覆{
位置:相对;
宽度:100%;
身高:500 px;
溢出:隐藏;
}
#箱{
位置:绝对的;
宽度:100%;
身高:1500 px;
背景:线性渐变(蓝、白);
} 函数initScroll () {//js模拟垂直滚轮滑动
var scrollEle=$(& # 39; #箱# 39;);
var scrollWrap=$ (& # 39; # box-wrap& # 39;);
var scrollSpd=20;//滚轮滚动的速度
var Max_dist=scrollEle.height () -scrollWrap.height();//两个组件底边之间的最大距离
如果(Max_dist<=0) {
返回;
}
scrollEle.css(& # 39;底部# 39;,-Max_dist);
scrollEle.bind (& # 39; mousewheel& # 39;,函数(事件){
var=scrollSpd步;
event.preventDefault ();
事件=事件。originalEvent;//兼容firefox
event.delta=(event.wheelDelta) ?事件。wheelDelta/120: - (event.detail | | 0)/3;
var tempPos=方法(scrollEle.css(& # 39;底部# 39;));
console.log (tempPos);
如果(event.delta> 0) {
如果(tempPos> (-Max_dist)) {
tempPos-step> (-Max_dist) ?tempPos=tempPos-step: tempPos=-Max_dist;
}
其他}{
如果(tempPos<0) {
tempPos + step<0 ?tempPos=tempPos +步骤:tempPos=0;
}
}//console.log (tempPos);
scrollEle.css(& # 39;底部# 39;,tempPos);
});
}
initScroll (); event.delta=(event.wheelDelta) ?事件。wheelDelta/120: - (event.detail | | 0)/3; & lt; html>
& lt; head>
& lt; style>
#箱包覆{
位置:相对;
宽度:100%;
身高:500 px;
溢出:隐藏;
}
#箱{
位置:绝对的;
宽度:100%;
身高:1500 px;
背景:线性渐变(蓝、白);
}
& lt;/style>
& lt;脚本src=https://www.yisu.com/zixun/薄?jquery-1.11.3.min.js ">
身体
这篇文章主要介绍怎么使用jQuery消除网页的滚动条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
网页有些时候需要能滚动的效果,但是不想要滚动条,我就遇到了这样的需求。自己用金桥写了一个垂直滚动条。
纯css也可以实现
但是边缘和Firefox不兼容,自己想了一下只要监听滚轮事件,用金桥写应该很简单,所以就自己写了一下。
原理:需要两个div,第一个就命名为箱包覆吧,它是一个外层的包裹,由于是垂直滚动,所以要固定高度,然后设置溢出:隐藏起来,这样竖直方向超过高度的部分就会被隐藏
第二个div就是内容需要滚动的div,命名为框,采用绝对定位,在监听到鼠标滚轮事件后根据滚轮方向相对移动
css代码
为了能演示效果,里面的盒子我写成了定高,并且让背景渐变,正常来讲可以高度汽车让文字撑开就行了,样式的关键在于让父类相对之后再让子类绝对,这样子类就可以相对父类移动
js代码
主要就是监听滚轮事件,从而判断滚轮的方向
这句是为了兼容火狐,其他浏览器都是属性名称为wheelDelta,值表示为120年向上,-120年向下,火狐是属性名称为细节,值表示为3向下,3向上
每次触发滚轮事件都会获取子类的位置,然后根据滚轮的方向调整当前位置,注意判断一下边界就好了
演示代码
