微信公众号ios端，滚动条不隐藏解决办法其中之一

最新推荐文章于 2024-04-21 09:10:41 发布

喜大普奔⁶⁶⁶

最新推荐文章于 2024-04-21 09:10:41 发布

阅读量1k

点赞数

分类专栏：微信公众号 css 文章标签：微信公众号 css

本文链接：https://blog.csdn.net/qq_38652871/article/details/103148472

版权

css 同时被 2 个专栏收录

24 篇文章

订阅专栏

微信公众号

5 篇文章

订阅专栏

针对Vue项目中在iOS设备上出现的滚动条显示问题，通过调整CSS布局，使用额外的盒子层并设置overflow属性，成功隐藏了滚动条，提供了一种有效解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue版本的项目，横着的算是swiper吧，上个图先瞅瞅
在这里插入图片描述
就是它，在android上一丁点问题没有，滚动条？都不出来，放到ios上就是这么个玩意儿
且看解决思路：
现在这个样式先不动（称A盒子），在外面再套一层盒子（称B盒子），给外面的overflow设置hidden;
然后将 A盒子给个margin-bottom:100px;将滚动条挤下去，再给个margin-bottom:-100px;利用外边距将外面的盒子提上来，让B盒子挡住滚动条，这样就很好的解决了这个BUG，也不用担心什么 scrollbar 失效的问题了

上代码：

.vip-processing-type-box{
    overflow:hidden;
    padding: 60px;
    .vip-processing-type {
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:100px;
        margin-bottom:-100px;
        //.other{***}
    }
}