您的当前位置:首页正文

横向滑动/滚动隐藏滚动条

2024-10-18 来源:威能网
上周,因为要用到可以横向滚动,不能出现滚动条的样式,网上搜了一圈也没有点想要的效果,干脆去偷一个~

先预览下效果吧

Vs

ok,上代码~

HTML:

  • CSS:

    .demo-tab{
     position:fixed;
     bottom:41px;
     overflow:hidden;/*主要*/
     width:100%;
     height:50px;/*主要*/
    }
    .demo-tab ul{
     width:100%;
     height:60px;/*主要*/
     font-size:0;
     background:#e8e8e8;
     overflow-x:scroll;/*主要*/
     overflow-y:hidden;/*主要*/
     white-space:nowrap;
    }
    .item{
     display:inline-block;
     width:33.3333333%;
     height:100%;
     padding:10px 0;
     font-size:18px;
     background:#9c9c9c;
    }
    .item-on{
     height:12px;
     background:#04be02;
    }

    总结一下,其实就是外层的div的高度要比里层ul/div或者其它元素的高度小,然后overflow:hidden

    这是目前已知的一种,也许还会有其它方法吧,希望这个方法能对dev有帮助。

    美图,请欣赏,缩小尺寸了~


    显示全文