隐藏滚动条，移动端

来源：互联网发布：网络舆论引导编辑：程序博客网时间：2024/05/16 18:37

1.原因

当然是滚动条长得丑才需要隐藏啊，真是开玩笑~~~QAQ而且也抵挡不住产品的吐槽，硬着头皮上了。

2. 方法

1.使用CSS3的transform:translate配合padding和margin使用。（只支持CSS3的浏览器，来自百度的方法。）
2.使用原生的position: realtive配合padding和margin使用。（我自己写的，测试无兼容性问题）
3. 举个栗子

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>隐藏横向滚动条</title>    <style>    * {        margin: 0;        padding: 0;    }    .cover {        width: 100%;        height: 60px;        overflow: hidden;    }    .father {        width: 100%;        padding: 0 10px;        background-color: #ff630c;        overflow-x: auto;        margin-top: -30px;        padding-bottom: 30px;        -webkit-transform: translateY(30px);        transform: translateY(30px);        box-sizing: border-box;    }    .son {        width: 500%;        letter-spacing: -10px;    }    .show {        width: 19%;        height: 60px;        background-color: #f00;        display: inline-block;        *display: inline;        *zoom: 1;        margin-right: 5px;        text-align: center;    }    .second {        width: 100%;        height: 50px;        background-color: #eee;        z-index: 100000;    }    </style>    <style>    .cover2 {        width: 100%;        height: 50px;        overflow: hidden;    }    .father2 {        box-sizing: border-box;        overflow-x: scroll;        width: 100%;        position: relative;        top: 30px;        margin-top: -30px;        padding-bottom: 30px;        -webkit-overflow-scrolling: touch;        opacity: 0.8;    }    .son2 {        width: 500%;    }    .show2 {        display: inline-block;        vertical-align: middle;        letter-spacing: -99999px;        text-align: center;        width: 19%;        margin-right: 10px;        height: 50px;        background-color: #f00;    }    </style></head><body>    <div class="cover">        <div class="father">            <div class="son">                <div class="show">1</div>                <div class="show">2</div>                <div class="show">3</div>                <div class="show">4</div>                <div class="show">5</div>            </div>        </div>    </div>    <div class="cover">        <div class="father2">            <div class="son2">                <div class="show2">1</div>                <div class="show2">2</div>                <div class="show2">3</div>                <div class="show2">4</div>                <div class="show2">5</div>            </div>        </div>    </div>    <div class="second"></div></body></html>

三、小结

还有点问题，就是父级不应该设置高度的，我再找找解决方法。

阅读全文

0 0