移动端去除横向滚动条问题，兼容ios

最新推荐文章于 2024-06-05 09:46:36 发布

HainesFreeman

最新推荐文章于 2024-06-05 09:46:36 发布

阅读量5.6k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_41829196/article/details/80318626

版权

问题描述：

已经设置： .selector::-webkit-scrollbar { display: none }

在浏览器上面横向滚动条已经消除，安卓上面也消失了，但是ios上面仍然有

解决办法：

原理：ios无法直接让滚动条隐藏::-webkit-scrollbar {display: none;}是没有用的，所以我的思路就是让滚动条离远点超出父元素的范围，在通过隐藏父元素的超出部分让滚动条消失。由于子元素的高度大于父元素的高度，超过父元素的高度的内容被剪裁。因此，子元素的滚动条就被剪裁掉了

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
body {width: 100%;overflow: hidden;}
* { margin: 0;padding: 0;}
.con {
    position: relative;
    width: 100%;
    /*height: 200px;*/ /*为了处理safari出现的滚动条*/
    overflow: hidden;/*把处理到元素外面的滚动条隐藏*/
}
.aa {
    /*height: 205px;*/ /*为了处理safari出现的滚动条*/
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;/*这个属性可以使滚动更流畅有左右弹动*/
    margin-top: -.3rem;
    padding-bottom: .3rem;
    -webkit-transform: translateY(0.3rem) !important;
    transform: translateY(0.3rem);
}
.bb {width: 1890px;}
.bb span {
    display: inline-block;
    width: 200px;
    height: 200px;
    background: #ccc;
    margin-right: 10px;
    float: left;
}
</style>
<body>
    <!-- 最少要有三层，在第三层放滚动的元素 -->
    <div class="con"><!-- 第一层必须要 有overflow: hidden-->
        <div class="aa"><!-- 第二层 处理盒子位置 进而把滚动条处理到元素下面（外面）以便隐藏滚动条-->
            <div class="bb"><!-- 第三层写具体的宽度-->
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>4</span>
                <span>6</span>
                <span>7</span>
                <span>8</span>
                <span>9</span>
            </div>
        </div>
    </div>
</body>
</html>

HainesFreeman

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
移动端去除横向滚动条问题，兼容ios

问题描述：已经设置： .selector::-webkit-scrollbar { display: none }在浏览器上面横向滚动条已经消除，安卓上面也消失了，但是ios上面仍然有解决办法：原理：ios无法直接让滚动条隐藏::-webkit-scrollbar {display: none;}是没有用的，所以我的思路就是让滚动条离远点超出父元素的范围，在通过隐藏父元素的超出部分让滚动条消失。由...
复制链接

扫一扫