uniapp，解决h5、app、微信小程序端滚动条无法隐藏问题

问题出现场景

1.默认情况下内容超出屏幕的高度会产生滚动条，如下图所示。

H5端滚动条​​​​​​

微信小程序端滚动条

2.在 pages.json 文件中加入，以下代码发现无法解决，滚动条依然存在。

有效解决滚动条显示方法

第一种：在 App.vue 文件中，加入以下代码。

<style lang="scss">

page {
        height: 100%;
        overflow: auto;
    }
    &::-webkit-scrollbar {
        display: none !important;
    }

</style>

注意：H5端的滚动条被隐藏掉了，微信小程序滚动条可能还存在！

解决H5端滚动条代码

第二种：同时解决H5、微信小程序、App端滚动条显示问题。

首先，在页面最外层加一个 view 标签，定义一个类，隐藏滚动条。

其次，在 App.vue 文件中，加入以下代码

<style lang="scss">
    page {
        height: 100%;
        overflow: auto;
        &::-webkit-scrollbar {
            display: none !important;
        }
        // 取消滚动条
        .cancel-scrollbar{
            height: 100%;
            overflow:auto;
        }
        .cancel-scrollbar::-webkit-scrollbar {
            display: none !important;
        }    
    }

</style>

解决H5、微信小程序、App滚动条显示