I G U P
web爱好者
Copyright©2018 by igup

css隐藏dom滚动条

通过双div实现隐藏滚动条 , 实现左右 和 上下滑动(多用于移动端)

隐藏底部x轴滚动条:

  • HTML:

<div id=”box”>
   <div class=”box1″>
      <div class=’c’>男装</div>
      <div class=’c’>女装</div>
      <div class=’c’>母婴</div>
      <div class=’c’>车体</div>
      <div class=’c’>鞋包</div>
      <div class=’c’>其他</div>
      <div class=’c’>男装</div>
      <div class=’c’>女装</div>
      <div class=’c’>母婴</div>
      <div class=’c’>车体</div>
      <div class=’c’>鞋包</div>
      <div class=’c’>其他</div>
   </div>
</div>

  • CSS

#box{
width: 100%;
height: 30px;
overflow: hidden;
}
.box1{
width: 100%;
height: 50px;
overflow-x: scroll;
white-space: nowrap;
}
.box1>div{
line-height: 30px;
display: inline-block;
margin-left: 5px;
}

实现思路: 2个包裹div, 必须定义div的高度,并且最外层包裹div高度必须大于内层包裹div高度高出多少都可以, 用于隐藏掉滚动条,  最外层的高度可以写你自己的实际使用高度, 实际内容块的div的行高可以写你实际使用行高(也就是最外层div的高度) 

隐藏右侧y轴滚动条思路也是一样的.

滚动条的移动:

var c= document.getElementsByClassName(‘c’);
for(var i=0;i<c.length;i++){
c[i].onclick= cli;
}
function cli(){
document.getElementsByClassName(‘box1’)[0].scrollLeft+=20;
if(document.getElementsByClassName(‘box1’)[0].scrollLeft>135){
document.getElementsByClassName(‘box1’)[0].scrollLeft=0;
}
}

2018-08-16
文章归档:

说点什么

  Subscribe  
提醒