这次给大家带来如何使用jQuery 消除网页的滚动条,使用jQuery 消除网页的滚动条的注意事项有哪些,下面就是实战案例,一起来看一下.
网页有些时候需要能滚动的效果,但是不想要滚动条,我就遇到了这样的需求.自己用jq写了一个垂直滚动条.
纯css也可以实现
css代码
#box-wrap{
position: relative;
width: 100% ;
overflow: hidden;
}
#box{
position: absolute;
background: linear-gradient(blue,white) ;
}为了能演示效果,里面的盒子我写成了定高,并且让背景渐变,正常来讲可以高度auto让文字撑开就行了,样式的关键在于让父类relative之后再让子类absolute,这样子类就可以相对父类移动
js代码
function initScroll(){
//js模拟垂直滚轮滑动
var Max_dist = scrollEle.height()-scrollWrap.height() ;//两个组件底边之间的最大距离
if(Max_dist<=0){
return ;
var step = scrollSpd ;
event.preventDefault() ;
event = event.originalEvent ;
//兼容firefox
console.log(tempPos) ;
0){
(-Max_dist)){
(-Max_dist)? tempPos = tempPos-step : tempPos = -Max_dist ;
}else{
if(tempPos<0){
tempPos◆step<0? tempPos = tempPos◆step : tempPos = 0 ;
//console.log(tempPos) ;
});
initScroll() ;主要就是监听滚轮事件,从而判断滚轮的方向
每次触发滚轮事件都会获取子类的位置,然后根据滚轮的方向调整当前位置,注意判断一下边界就好了
demo代码
initScroll() ;
相关阅读：
怎么给span标记样式设置width属性
html与xhtml和xml有什么区别
iframe的子页面怎样操作父页屏蔽页面弹出层效果
HTML中定义多个class属性无效
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位.
var
container
=
scrollTo
container.scrollTop(
scrollTo.offset().top
-
container.offset().top
◆
container.scrollTop()
);
//
Or
you
can
animate
the
scrolling:
container.animate({
scrollTop:
不需要任何JQuery插件即可完成所需的效果,非常好用！
$(selector).scrolltop(offset)可以设置滚动条位置.例如：
以上就是土嘎嘎小编大虾米为大家整理的相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用，就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！